Question

我有一个包含子类别的垂直菜单。单击主类别时，子菜单向下滑动，之前打开的子菜单向上滑动。我希望如果用户第二次点击相同的主菜单项，它会滑动相关的子菜单。使用此代码，当第二次单击相同的主菜单项时，它几乎同时打开和关闭它。

$(".main-cat").click(function() {
    $(".active-sub").hide('slow');
    $(".sub" , $(this).parent()).toggle('slow');    
    $(".sub" , $(this).parent()).addClass('active-sub');
});

<div id="sidebar">
<ul>
    <li class="main">
        <div class="main-cat 1">Real Estate</div>
        <ul class="sub" id="sub_real_estate">
            <li><div class="sub-cat 2">Consulting Services</div></li>
            <li><div class="sub-cat 3">Investment</div></li>
            <li><div class="sub-cat 4">Property Management</div></li>
            <li><div class="sub-cat 5"> Development</div></li>
        </ul>
    </li>
    <li class="main">
        <div class="main-cat 6">Investment</div>
        <ul class="sub" id="sub_investment">
                <li><div class="sub-cat 7">Philosophy</div></li>
                <li><div class="sub-cat 8">Criteria</div></li>
          </ul>
        </li>
    </ul>
</div>

Answer 1

您可以通过将代码分配给在初始更改发生后运行的匿名函数来延迟更改，例如 -

$(".main-cat").click(function() {
    $(".active-sub").hide('slow', function () {
      $(".sub" , $(this).parent()).toggle('slow');    
      $(".sub" , $(this).parent()).addClass('active-sub');
    });
});

我不确定你的描述是否上述代码可以解决问题，但我认为这种技术可能有所帮助。

修改

看了你的HTML我认为下面的代码应该解决问题（http://jsfiddle.net/WftqT/1/） -

$(".main-cat").click(function() { //hide or show clicked menu $(".sub" , $(this).parent()).toggle('slow'); //if clicked menu is now visible close all other open menus if (!$(".sub" , $(this).parent()).is(':hidden')) $(".maincat").not(this).parents('li').find('ul:[class="sub"]').hide('slow'); });

Answer 2

试试这个

$(".main-cat").click(function() {
    $('.active-sub').toggle('slow');
    $(".sub" , $(this).parent()).addClass('active-sub').toggle('slow');    
});

Answer 3

只是查看你的代码，它似乎永远不会删除active-sub类。您请求的功能取决于您的HTML，但如果您有一个列表或div和细分，这个jsFiddle将实现您的目标：jsFiddle

添加了stopPropagation（），因为如果有人在其中行动，我不相信你想要关闭细分。

jQuery的：

$(".main-cat").click(function() {
    current=$(this).find(".sub:hidden");
    $(".sub").slideUp(300);
    if(current.length){
        current.slideDown(300);          
    }  
});
$(".sub").click(function(event){
    event.stopPropagation();
});

jquery菜单向下滑动

3 个答案: