jQuery SlideDown 仅当单击另一个`ul`

Question

我有一个无序列表。

<div class="categories-list">
    <ul class="display_categories">
        <li>
            <a class="title"><span><b>1</b></span></a> 
            <ul class="display_subcategories">
                <li><a>22</a></li>
                <li><a>22</a></li>
            </ul>
        </li>
        <li>
            <a class="title"><span><b>1</b></span></a> 
            <ul class="display_subcategories">
                <li><a>22</a></li>
                <li><a>22</a></li>
            </ul>
        </li>
    </ul>
</div>

我希望当用户点击任何类别时，它的子类别应该向下滑动，并且每当点击相同的类别时，什么都不应该发生。 这是我的 jQuery

$('.display_subcategories').hide()
$('.title').click(function(){
    $('.display_categories').children().children('ul').slideUp('fast');
    $(this).next().slideDown('fast');
})                

但是发生的情况是，在单击已经滑出的类别时，它会再次向上滑动然后向下滑动。

这是jsFiddle链接

Answer 1

您可以slideDown当前子菜单，然后使用not()来slideUp()除当前之外的所有子菜单，如下所示：

$('.display_subcategories').hide()
$('.title').click(function() {
    var $submenu = $(this).next().slideDown('fast');
    $('.display_categories').find('> li > ul').not($submenu).slideUp('fast');
});

更新的小提琴

还要注意在链式children()调用上将find()与后代选择器一起使用。

Answer 2

尝试这个

    $('.display_subcategories').hide();

    $('.title').click(function(){
       if(!$(this).hasClass('down')){
          $('.title').removeClass('down');
          $('.display_categories').children().children('ul').slideUp('fast');
          $(this).next().slideDown('fast');
          $(this).addClass('down');
      }  
  })

更新的 JS 小提琴

Answer 3

我建议让 CSS 通过触发或禁用类来管理您的动画。 一个简单的例子是将.active类添加到一个开放的<ul> ，以及以下 CSS：

.display_subcategories { max-height: 0; overflow: hidden; transition: all 300ms; }
.display_subcategories.active { max-height: 50px; }

这是我建议的修改后的 JSFiddle 。