如何顯示/隱藏Jquery中的多個元素

Question

我目前正在創建一個菜單類型，其中將包含子菜單，當選擇菜單項時，該特定菜單項的子菜單將出現，菜單將被關閉。

每個菜單列表都以內聯方式顯示，以便它們在一行中以3排成一排，子菜單將直接出現在整個頁面的下方，並將菜單的其餘部分向下推這一頁。

我很難做到這一點，所以當按下項目1時，只有子菜單1顯示，等等。目前，當任何項目被按下時，子菜單1將被顯示。

下面是HTML ...

<ul id="menu"> 
     <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

<div class="sub-menu 1"> 
    <ul> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
    </ul> 
</div> 

<div class="sub-menu 2"> 
     <ul> 
      <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
    </ul> 
</div> 

<div class="sub-menu 3"> 
    <ul> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
    </ul> 
</div> 




<ul id="menu"> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
</ul> 

<div class="sub-menu 4"> 
    <ul> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
    </ul> 
</div> 

<div class="sub-menu 5"> 
    <ul> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
    </ul> 
</div> 

<div class="sub-menu 6"> 
    <ul> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
    </ul> 
</div> 

下面是jQuery的

$(document).ready(function(){ 
    $("#menu > li").toggle(
    function(){ 

      $("#buying-guide-homepage > li").animate({height:109},"slow"); 
      $(".sub-menu 1").slideDown("slow"); 

     }, 
     function(){ 

     $(".sub-menu 1").slideUp("slow"); 
     $("#buying-guide-homepage > li").animate({height:89},"slow"); 

     }); 
}); 

Answer 1

如果你改變你的HTML這樣的：

<ul id="menu"> 
    <li id='sub-menu1'>Item 1</li> 
    <li id='sub-menu2'>Item 2</li> 
    <li id='sub-menu3'>Item 3</li> 
</ul> 

<div class="sub-menu1"> 
    <ul> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
    </ul> 
</div> 

<div class="sub-menu2"> 
     <ul> 
      <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
    </ul> 
</div> 

<div class="sub-menu3"> 
    <ul> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
    </ul> 
</div> 




<ul id="menu"> 
    <li id='sub-menu4'>Item 4</li> 
    <li id='sub-menu5'>Item 5</li> 
    <li id='sub-menu6'>Item 6</li> 
</ul> 

<div class="sub-menu4"> 
    <ul> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
    </ul> 
</div> 

<div class="sub-menu5"> 
    <ul> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
    </ul> 
</div> 

<div class="sub-menu6"> 
    <ul> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
     <li>Sub-menu item</li> 
    </ul> 
</div> 

你可以這樣做：

$('div[class^="sub-menu"]').hide(); 
$("#menu > li").click(function(event){ 
    var id = event.target.id; 
    console.log(id); 
    $('div[class^="sub-menu"]').hide(); 
    $('div[class="'+id+'"]').show(); 

}); 

小提琴這裏：http://jsfiddle.net/ZEKNM/

編輯 - UPDATE隱藏在點擊

顯示的菜單

$('div[class^="sub-menu"]').hide(); 
$("#menu > li").click(function(event){ 
    var id = event.target.id; 
    var div = $('div[class="'+id+'"]'); 
    if(div.is(':visible')){ 
     div.hide(); 
    }else{ 
     $('div[class^="sub-menu"]').hide(); 
     div.show(); 
     } 

}); 

這裏更新小提琴：http://jsfiddle.net/ZEKNM/1/

Answer 2

我認爲，問題是你有.SUB菜單和數字之間的空間。如果您更改您的代碼以使用.sub-menu-1.sub-menu-2等，我認爲您會發現它的工作原理。

我認爲這是這種情況的原因是因爲空間表示將第二個類應用於DOM中的該對象。所以你的.sub-menu 1真的是兩類，sub-menu和1。你也可以選擇.1，你會得到正確的元素。如果你只是在嘗試$(".sub-menu 1").html("CHANGED THE HTML");，你將看不到任何變化。但是，如果將其更改爲$(".1").html("CHANGED");或將類名稱更改爲sub-menu-1，然後執行$(".sub-menu-1").html("CHANGED")，則它也可以工作。

Answer 3

http://jsfiddle.net/dNcpJ/1/

有可能是一個更好的方式來選擇顯示哪個菜單，我只是把頂層菜單內文本作爲子菜單的ID。