的jQuery折叠菜单

我试图让坍塌的菜单，标记低于：的jQuery折叠菜单

如果点击了一个.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的和折叠他们。我添加了可以更改为使用toggleClass扩展的.collapsed类。

我知道我靠近......

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

来源

2009-12-17 stef

-1

熊与我为我的大脑有点炸，我想不出具体的代码，但我倾向于隐藏/折叠所有元素，然后只在点击“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; 
});

}）;

来源

2009-12-17 19:50:49 Dan

对我的作品，谢谢！实际上... – stef 2009-12-17 19:55:47

...单击打开的菜单将其关闭并再次打开。不是那里 – stef 2009-12-17 20:00:19

所以我这个做的就是到当前单击项目的引用：

var $this = $(this);

然后关闭所有链接：

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

然后打开你想要的：

$this.show()

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

来源

2009-12-17 19:55:18 Jason

为什么切换成一个主要的PITA？ – stef 2009-12-17 19:57:50

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

来源

2009-12-17 20:01:24 jitter

这个工程，除非你点击已经打开的ul上面的链接，它会崩溃并再次打开。理想情况下，它会崩溃 – stef 2009-12-17 20:11:14

再次检查。稍作修改。 '.click（function（）...'替换为'.live（“click”，function（）...' – jitter 2009-12-17 23:37:01

首先，您的“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>

为了使用siblings（）函数，用collasped或expanded类标记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”只是展开其“子菜单”。

来源

2009-12-17 20:01:43

的jQuery折叠菜单

回答

相关问题