Javascript 只有在单击另一个'ul'时，jQuery才会向下滑动

我有一张无序的名单

<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>

但是，当点击已经滑下的类别时，它会再次向上滑动，然后向下滑动

---

这是链接

您可以

向下滑动当前子菜单，然后使用
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（）
子代选择器。
试试这个

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

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

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

这是我的建议。
谢谢你的回答。我可以问一下你以前的答案和你现在的有什么不同吗？这个答案更有效，因为它使用更少的选择器，而且更短。谢谢。。请您发布这两种解决方案。：）
.display_subcategories { max-height: 0; overflow: hidden; transition: all 300ms; }
.display_subcategories.active { max-height: 50px; }