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

Updated fiddle

另请注意find()与后代选择器在链接children()调用中的使用。

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

Updated JS Fiddle

Answer 3

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

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

根据我的建议，这是a modified JSFiddle。

jQuery SlideDown仅在单击另一个`ul`时

3 个答案: