jQuery - 单击菜单项时关闭手风琴菜单

问题描述：

当点击子菜单链接时，如何停止手风琴菜单ul.sub-menu关闭？

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.

这是我的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>

这是我的jquery：

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');
    });
});

答

手风琴，

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{

            }
        }
});

jQuery - 单击菜单项时关闭手风琴菜单

相关推荐