javascript - How to append onclick event to li class? - Stack Overflow

admin管理员组

文章数量:1400161

I want to apply this attribute:

onclick=​"expandMenu(this.parentNode)​"

to every li with the class="parent"

So far I have this and can't get it to work:

<script type="text/javascript">
if ($('li').hasClass('parent'))
{
'onclick' => 'expandMenu(this.parentNode)';
}
</script>

This is the browser-side code of the menu, generated by Magento. Each li has an anchor tag inside. I think I need to make those unclickable in order for this to work. What I want to be able to do is expand product categories (like the arrow does) by clicking on the li, rather than have it take you to the page:

<div id="sidebar-nav" class="sidebar-nav-left">
<div class="block-title">
<strong><span>Categories</span></strong> 
</div>
<div class="block-content">
<ul id="sidebar-nav-menu">
<li class="level0 nav-1 first parent" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 10px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="tion.html"><span class="category_name">tion</span></a>
</div>
<ul class="level0" style="margin-left: 5px; padding-left: 10px;" expanded="0">
<li class="level1 nav-1-1 first parent" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 10px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="system.html"><span class="category_name">System</span></a>
</div>
<ul class="level1" style="margin-left: 5px; padding-left: 10px;" expanded="0">
<li class="level2 nav-1-1-1 first last" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
a href="accessories.html"><span class="category_name">Accessories</span></a>
</div>
</li>
</ul>
</li><li class="level1 nav-1-2" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="pack.html"><span class="category_name">Pack</span></a>
</div>
</li><li class="level1 nav-1-3" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="system.html"><span class="category_name">System</span></a>
</div>
</li><li class="level1 nav-1-4 parent" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 10px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="accessories.html"><span class="category_name"> Accessories</span></a>
</div>
<ul class="level1" style="margin-left: 5px; padding-left: 10px;" expanded="0">
<li class="level2 nav-1-4-2 first" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="needles.html"><span class="category_name"> Needles</span></a>
</div>
</li><li class="level2 nav-1-4-3" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="cha.html"><span class="category_name">Percha</span></a>
</div>
</li><li class="level2 nav-1-4-4" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="condensers.html"><span class="category_name">Condensers</span></a>
</div>
</li><li class="level2 nav-1-4-5" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="resilon.html"><span class="category_name">Resinate</span></a>
</div>
</li><li class="level2 nav-1-4-6 last" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="pluggers.html"><span class="category_name">Heat</span></a>
</div>
</li>
</ul>
</li><li class="level1 nav-1-5" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="heat.html"><span class="category_name">Heat</span></a>
</div>
</li><li class="level1 nav-1-6 last" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="replacement-parts.html"><span class="category_name">Parts</span></a>
</div>
</li>
</ul>
</li>        </ul> 
</div>
</div>

I want to apply this attribute:

onclick=​"expandMenu(this.parentNode)​"

to every li with the class="parent"

So far I have this and can't get it to work:

<script type="text/javascript">
if ($('li').hasClass('parent'))
{
'onclick' => 'expandMenu(this.parentNode)';
}
</script>

This is the browser-side code of the menu, generated by Magento. Each li has an anchor tag inside. I think I need to make those unclickable in order for this to work. What I want to be able to do is expand product categories (like the arrow does) by clicking on the li, rather than have it take you to the page:

<div id="sidebar-nav" class="sidebar-nav-left">
<div class="block-title">
<strong><span>Categories</span></strong> 
</div>
<div class="block-content">
<ul id="sidebar-nav-menu">
<li class="level0 nav-1 first parent" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 10px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="tion.html"><span class="category_name">tion</span></a>
</div>
<ul class="level0" style="margin-left: 5px; padding-left: 10px;" expanded="0">
<li class="level1 nav-1-1 first parent" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 10px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="system.html"><span class="category_name">System</span></a>
</div>
<ul class="level1" style="margin-left: 5px; padding-left: 10px;" expanded="0">
<li class="level2 nav-1-1-1 first last" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
a href="accessories.html"><span class="category_name">Accessories</span></a>
</div>
</li>
</ul>
</li><li class="level1 nav-1-2" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="pack.html"><span class="category_name">Pack</span></a>
</div>
</li><li class="level1 nav-1-3" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="system.html"><span class="category_name">System</span></a>
</div>
</li><li class="level1 nav-1-4 parent" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 10px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="accessories.html"><span class="category_name"> Accessories</span></a>
</div>
<ul class="level1" style="margin-left: 5px; padding-left: 10px;" expanded="0">
<li class="level2 nav-1-4-2 first" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="needles.html"><span class="category_name"> Needles</span></a>
</div>
</li><li class="level2 nav-1-4-3" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="cha.html"><span class="category_name">Percha</span></a>
</div>
</li><li class="level2 nav-1-4-4" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="condensers.html"><span class="category_name">Condensers</span></a>
</div>
</li><li class="level2 nav-1-4-5" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="resilon.html"><span class="category_name">Resinate</span></a>
</div>
</li><li class="level2 nav-1-4-6 last" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="pluggers.html"><span class="category_name">Heat</span></a>
</div>
</li>
</ul>
</li><li class="level1 nav-1-5" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="heat.html"><span class="category_name">Heat</span></a>
</div>
</li><li class="level1 nav-1-6 last" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="replacement-parts.html"><span class="category_name">Parts</span></a>
</div>
</li>
</ul>
</li>        </ul> 
</div>
</div>

• javascript
• jquery
• onclick

Share Improve this question Follow edited Feb 22, 2012 at 20:53 Ten Sleep asked Feb 22, 2012 at 20:32 Ten SleepTen Sleep 1,19766 gold badges2020 silver badges3636 bronze badges 3

• so are you wanting only the anchor tags that don't have a parent li with the class parent to work as an actual link and take you to another page. If it does have a parent li with a class parent then it will expand? Hope that made sense – Henesnarfel Commented Feb 22, 2012 at 21:07
• I want any li with the class parent that doesn't have a parent li to expand. Any that do have a parent li should take you to another page. – Ten Sleep Commented Feb 22, 2012 at 21:16
• check out my new answer below and see if thats what you want – Henesnarfel Commented Feb 22, 2012 at 21:23

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Just do the below

$("li.parent").click(function()
{
    expandMenu(this.parentNode);
});

example here

Below is an updated version on what I think you are looking for.

It will detect an link click and check its parent li for the class parent. If it finds the class it will prevent the link and expand the menu. If it doesn't find the class the link works as it should

$("#sidebar-nav-menu a").click(function()
{
    if($(this).parent().parent().hasClass("parent"))
    {       
        expandMenu(($(this).parent()).parentNode);
        //return flase prevents the anchor link from working
        return false;
    }
});

EDIT

you didn't tell us you redefined the jquery $ to jQuery

put this in your unclick.js

jQuery(document).ready( function() 
{ 
    jQuery("#sidebar-nav-menu li.level0 > div > a").click(function() 
    {
        if(jQuery(this).parent().parent().hasClass("parent")) 
        { 
            expandMenu(this.parentNode.parentNode); 
            //return flase prevents the anchor link from working 
            return false;
        } 
    }); 
});

This will work for all of the li elements with the parent class currently on the document:

$('li.parent').on('click', function(){
    expandMenu(this.parentNode);
});

However, if you want to do this for future elements that may be added later, you can use this:

$(document.body).on('click', 'li.parent', function(){
    expandMenu(this.parentNode);
});

Edit

As far as preventing the links from firing, you can use this code:

$('#sidebar-nav-menu a').on('click', function(e) {
   e.preventDefault();
});

But that will prevent all of the links on the menu from firing (except links added after the call to this method);

Edit Again

Finally, we can use this, which will only fire off the links that do not have sub-menus.

$('#sidebar-nav-menu a').on('click', function(e) {

    if($(this).parent().siblings('ul').length)
    {
        // If my anchor is associated with a sub-catagory, prevent it from firing.
        e.preventDefault();
    }

    expandMenu(this.parentNode);
});

If you want use jQuery, all you must do is adding below code to this file: [your_magento_root]/skin/frontend/default/default/js/sidenavcollapse.js

jQuery(document).ready( function() 
{
    $('#sidebar-nav-menu div.collapsible-wrapper').click(function(){
        expandMenu(this.parentNode);
        return false;
    });
});

Don't forget loading jQuery library. If you like do this in other way like editing generated HTMLs, please let me know, I'll say about it.

Edit:

We return false to deactivating "a" tag's "href".

Don't use the attribute. Use the jQuery click function:

$('li.parent').click(function(){
    expandMenu(this.parentNode);
});

本文标签： javascriptHow to append onclick event to li classStack Overflow