Question

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

当单击父项时，手风琴会打开罚款，但当在其下方的级别中单击子菜单项时，它会再次关闭。

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

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

Answer 1

修改：

使用return代替event.stopPropagation()语句，以阻止事件传播到父级。

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

演示：http://jsfiddle.net/qNyR6/1/

添加以下代码将起作用：

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

这将确保<a>代码的点击不会传播到父<li>，从而导致菜单slideToggle（即崩溃，因为它已处于展开状态）< / p>
演示： http://jsfiddle.net/qNyR6/

Answer 2

手风琴，

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 - 单击菜单项时关闭手风琴菜单

2 个答案: