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>

使用collasped或extended类标记li.cat_menu_header更容易，以便使用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

所以我为此做的是引用CURRENT点击项：

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

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

}）;

jQuery折叠菜单

4 个答案: