jQuery slide toggle, close otherwhere accordion type?

Question

我有一个简单的手风琴式菜单滑动开关。

如果 li 有 class .menu-item-has-children 然后单击将滑动打开位于 li 中的 .sub-menu:

  $(".menu-item-has-children").unbind('click').click(function(){    
        $(".menu-item-has-children > a").toggleClass("sub-open");
        $(this).children(".sub-menu").slideToggle();
  });

如果单击另一个 class 和 menu-item-has-children，它会关闭我之前打开的那个，然后打开我刚刚单击的那个。

本质上是一架手风琴，在打开新手风琴之前关闭已经 collapsed/open 的手风琴。但是这些可能会出现在页面的其他地方，例如不同的列表。

Answer 1

您可以 slideUp() 其他 menu-item 元素的子菜单。

$(".menu-item-has-children").unbind('click').click(function(){  
    //Find other menu items 
    var otherMenuItems = $(".menu-item-has-children").not($(this));

    //Find children and perform Slideup sub-menus and remove sub-open class
    otherMenuItems.children(".sub-menu").slideUp();
    otherMenuItems.children("a").removeClass("sub-open");

    $(this).children("a").toggleClass("sub-open");
    $(this).children(".sub-menu").slideToggle();
});

jQuery slide toggle, close otherwhere accordion type?

jQuery slide toggle, close others wherever accordion type?

jquery

accordion

slidetoggle