的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摺疊菜單

回答

相關問題