3

单击子菜单链接时，如何阻止手风琴菜单 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');
    });
});​
4

2 回答 2

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级（即折叠，因为它已经处于展开状态）

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

于 2012-11-28T13:57:35.897 回答
1

手风琴送给你，

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{

            }
        }
});
于 2012-11-28T14:23:57.623 回答