向下滑动菜单 - 如何一次只允许打开一个路径？

Question

目前，如果我打开一个菜单并单击另一个菜单，它会打开第二个菜单，而第一个保持打开状态。我什至可以同时打开所有这些！

我想改变这种行为，这样我一次打开的菜单就不会超过一个。 （占所有级别/子菜单）

假设我打开“主页”并单击“项目 4”。出现“子项目 1”和“子项目 2”。如果我然后单击顶部的“联系人”，则打开的另一个菜单应该在“联系人”向下滑动之前关闭（理想情况下，所有级别都应该一次向上滑动一个）。

我知道问题在于 Javascript，所以我不会在此处粘贴 HTML 和 CSS，以免占用太多空间。

JSFiddle

谢谢

$(function(){
    $('ul#menu li').on('click', function(){
         $(this).children('ul').delay(20).slideToggle(600);
    });
});

$('ul').on('click', function(e){
  e.stopPropagation();
});

Answer 1

试试这个Fiddle

JS代码：

    $(function(){
        $('ul#menu li').on('click', function(){
            if($(this).children('.drop').size() > 0) {
                $("ul.drop").slideUp();
                $("ul.drop").find('ul').hide();
            } else {

            }

         $(this).children('ul').delay(20).slideToggle(600);
        });
    });

    $('ul').on('click', function(e){
      e.stopPropagation();
    });