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> 

は、私は、問題はあなたが.SUBメニューと番号の間に持っているスペースであると考えている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

を：

<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/

EDIT - 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-menu-1.sub-menu-2などを使用するようにコードを変更すると、そのコードが機能することがわかります。

私はこれが事実だと思う理由は、スペースがDOM内のそのオブジェクトに第2のクラスを適用していることを示しているからです。したがって、.sub-menu 1は実際にはsub-menuと1の2つのクラスです。 .1で選択するだけで、適切な要素が得られます。 $(".sub-menu 1").html("CHANGED THE HTML");を実行しようとすると、何も変わらないことがわかります。しかし、$(".1").html("CHANGED");に変更したり、クラス名をsub-menu-1に変更してから$(".sub-menu-1").html("CHANGED")に変更すると、それも機能します。あなたはこのようなあなたのhtmlを変更した場合

Answer 3

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

、表示するメニューを選択するための良い方法はおそらくあり、私は、サブメニューのIDとしてトップレベルメニューの内部テキストを取りました。