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>

follow 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

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

Answer 2

首先，您的“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 更容易，以便使用兄弟 () 函数。如果您想保持您的操作与上下文相关，例如，如果您为多个侧边栏初始化此事件，这将非常有用。

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 3

所以我为此做的是引用当前点击的项目：

var $this = $(this);

然后关闭所有链接：

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

然后打开你想要的：

$this.show()

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

Answer 4

请耐心等待，因为我的大脑有点发火，我想不出具体的代码，但我倾向于隐藏/折叠所有元素，然后只在 'a.collapsed' 时展开 $(this)被点击。希望这是有道理的:)

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

$("#sidebarNav a.collapsed").click(function() {
    $("#sidebarNav > li > ul").slideUp('fast'); // Slide them all up
    $(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("fast");
    return false;
});

});