javascript - 仅当单击另一个 `ul` 时才使用 jQuery SlideDown

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

但是发生的事情是，在点击已经 slideDown 的类别时，它再次向上滑动然后向下滑动。

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

Updated fiddle

还要注意 find() 与后代选择器在链式 children() 调用中的使用。