CODEWITHSUNDEEP
jquery
user18577
user18577

Reputation: 643

jQuery - Stop accordion menu from closing when menu item clicked

How do I stop the accordion menu ul.sub-menu from closing when a submenu link is clicked?

The accordion opens fines when the parent item is clicked, but when the submenu item is clicked in the level beneath it, it closes again.

Here's my HTML:

<ul class="menu">
  <li><a href="#">parent 1</a>
        <ul class="sub-menu">
            <li><a href="#">1st child item</a></li>
        </ul>
  </li>
    <li><a href="#">parent 2</a>
    <ul class="sub-menu current-menu-parent">
        <li><a href="#">2nd child item</a></li>
        <li class="current-menu-item"><a href="#">3rd child item</a></li>
    </ul>
  </li>
  <li><a href="#">parent 3</a>
        <ul class="sub-menu">
            <li><a href="#">4th child item</a></li>
        </ul>
  </li>    
</ul>​​​​​​​​

Here's my jquery:

jQuery(function($) {
    $(".menu > li").children("a").attr('href', 'javascript:void(0)');
    $('.sub-menu').hide();  
    $('.current-menu-parent').show();    
    $('.menu > li').click(function() {
        $(this).find('ul').slideToggle('slow');
    });
});​

Upvotes: 3

Views: 5017

Answers (2)

Dhamu
Dhamu

Reputation: 1752

Accordion for you,

HTML :

<ul class="menu">
  <li><a href="javascript:void(0)">parent 1</a>
        <ul class="sub-menu">
            <li><a href="#">1st child item</a></li>
        </ul>
  </li>
    <li><a href="javascript:void(0)">parent 2</a>
    <ul class="sub-menu current-menu-item">
        <li><a href="#">2nd child item</a></li>
        <li><a href="#">3rd child item</a></li>
    </ul>
  </li>
  <li><a href="javascript:void(0)">parent 3</a>
        <ul class="sub-menu">
            <li><a href="#">4th child item</a></li>
        </ul>
  </li>    
</ul>​​​​​​​​

CSS:

<style>
.sub-menu{
    display:none;
}
.current-menu-item{
    display:block;
}
</style>

JS:

rel = 0;


$('.sub-menu').hover(function(){ // findind mouse postion
        rel = 1; // if mouse on submenu
    }, function(){ 
        rel = 0;  if mouse out submanu
});
$('.menu > li').live("click",function(){


        if(!$(this).hasClass("active")){ // if not already opened
            $('.sub-menu').slideUp();    // hide all other submenu
            $('.sub-menu',this).slideDown();  // show which your clicked
            $(".menu > li").remove('active');  //  remove all active class in li
            $(this).addClass('active'); //adding active class which your clicked li
        }
        else{
            if(rel==0){
                $('.sub-menu').slideUp(); // if clicked already opend parent that will close
                $(this).removeClass('active'); // remove all active class
            }
            else{

            }
        }
});

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

Edit:

Instead of the return statement, use event.stopPropagation() to stop the event from propagating to the parent.

$('.menu li a').click(function(e) {
    if(!$(this).closest('ul').hasClass('menu')) e.stopPropagation();
});

Demo: http://jsfiddle.net/qNyR6/1/

Adding the below code will work:

$('.menu li a').click(function() {
    return $(this).closest('ul').hasClass('menu');
});

This will ensure that clicks on your <a> tags don't propagate over to the parent <li> causing the menu to slideToggle (i.e. collapse since it was already in expanded state)

Demo: http://jsfiddle.net/qNyR6/

Upvotes: 1

Related Questions