jQuery折叠菜单

Question

我正在尝试制作一个可以折叠的菜单，标记如下：

无论何时单击.cat_menu_header，它下面的ul都应该展开，所有展开的ul都应该折叠。因此，我们从所有折叠的元素开始，只显示.cat_menu_header元素，一次最多展开1个.submenu。

<ul id='sidebarNav'>
  <li class='cat_menu_header'><a class='collapsed' href='#'>Link 1
    <ul class='submenu'>
      <li><a href='#'>text 1</a></li>
      <li><a href='#'>text 2</a></li>
    </ul>
  </li>
  <li class='cat_menu_header'><a class='collapsed' href='#'>Link 2
    <ul class='submenu'>
      <li><a href='#'>text 3</a></li>
      <li><a href='#'>text 4</a></li>
    </ul>
  </li>
</ul>

下面的js使每个.submenu展开和折叠，但我不知道如何选择所有展开的ul和折叠它们。我添加了.collapsed类，可以使用toggleClass将其更改为.expanded。

我知道我快到了..。

    $(document).ready(function(){   
    //sidebar collapsible menu
    $("#sidebarNav > li > ul").hide();

    $("#sidebarNav a.collapsed").click(function() {
        $(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("fast");
        return false;
    });
});

Answer 1

首先，你的"li.cat_menu_header a“标签没有关闭。

<ul id="sidebarNav">
    <li class="cat_menu_header collapsed">
        <a href="#">Link 1</a>
        <ul class="submenu">
            <li><a href="#">text 1</a></li>
            <li><a href="#">text 2</a></li>
        </ul>
    </li>

    <li class="cat_menu_header collasped">
        <a href="#">Link 2</a>
        <ul class="submenu">
            <li><a href="#">text 1</a></li>
            <li><a href="#">text 2</a></li>
        </ul>
    </li>
</ul>

为了使用li.cat_menu_header ()函数，用collasped或expanded类标记siblings更容易。如果您希望保持操作与上下文相关，例如，如果您为多个侧边栏初始化此事件，这将非常有用。

jQuery( function()
{
    $("#sidebarNav ul.submenu").hide();

    $("#sidebarNav li.cat_menu_header > a").click( function()
    {
        $(this).parent().siblings( ".expanded" ).addClass( "collapsed" ).slideUp( "fast" );
        $(this).parent().addClass( "expanded" ).removeClass( "collapsed" );
        $(this).next().slideDown( "fast" );
    } );
} );

这个例子使"li.cat_menu_header a“只需展开它的”子菜单“。

Answer 2

因此，我要做的就是引用当前单击的项：

var $this = $(this);

然后关闭所有链接：

$('.submenu').hide();

然后打开你想要的：

$this.show()

这应该会让你朝着正确的方向前进。对于这种类型的操作，您也可能不应该使用“切换”，因为它将是一个主要的PITA。只需使用click()，关闭所有内容，在所有内容关闭后打开单击的内容。

Answer 3

function helper(ele) {
    ele.toggleClass("expanded")
       .toggleClass("collapsed")
       .find("+ ul")
       .slideToggle("fast");
}
$("#sidebarNav a.collapsed").live("click", function() {
    //just close the ones which are open
    helper($("ul#sidebarNav a.expanded"));
    helper($(this));
    return false;
});