1つの機能を持つ複数のdivの表示を切り替える：ナビゲーションバー

Question

私の課題：こんにちは！私はWebページ用のナビゲーションバーにあるそれぞれのトップメニューに属するサブメニューの可視性を切り替えるために、Javascriptでコードを書くとされている学校で課題を行っています。可視性は、デフォルトでは非表示に設定する必要があり、トップメニューをクリックすると表示されるはずです。 トップメニューに属するONEサブメニューの可視性を切り替える方法は知っていますが、複数の要素に対して自分のコードを機能させることはできません。私のHTMLコード：

 <a class="left_top1" onclick = "toggle()">Opinion</a><br> 
      <div class="left_submenu_1" style="display: none;"> 
      <a class="left_sub1">Leaders</a><br> 
      <a class="left_sub1">Debates</a><br> 
      </div> 
<br> 
      <a class="left_top2" onclick = "toggle()">Economy</a><br> 
      <div class="left_submenu_2" style="display: none;"> 
      <a class="left_sub2">News</a><br> 
      <a class="left_sub2">Your Economy</a><br> 
      </div> 

私の問題：私は話すtopmenusは "意見書" と "経済" です。トップメニュー "left_top1"をクリックすると、クラス "left_submenu_1"のdivの表示が切り替わります。したがって、トップメニュー "left_top2"をクリックすると、クラス "left_submenu_2"を持つdivのvisibililyを切り替える必要があります。これは私がしなければならないことです。私のJavascriptコードはこれまでのところです：

function toggle() { 
    var e = document.querySelectorAll("div.left_submenu_1, div.left_submenu_2"); 
    for (var i=0; i < e.length; i++) { // I know this will enable/disable the visibility for ALL elements selected from the querySelectorAll, which should NOT happen 
    if(e[i].style.display == "none") { 
     e[i].style.display = "block"; 
    } else if(e[i].style.display == "block") { 
     e[i].style.display = "none"; 
    } 
    } 
} 

私のこの問題を解決する方法を知っている人は誰ですか？私はforループにエラーがあることを知っています（私がそれに続いて書いたように）が、これは私が今管理できる最高です。

注意：1つの一般的な機能を使用して可視性を切り替えることは、jQueryを使用するか、topmenus id：sを与えることはできません。さらに、トグル機能を有効にするコードはJavascriptで行う必要があります。

Answer 1

divのクラス名を関数に表示する（または非表示にする）ようにしてアプローチします。

<a class="left_top1" onclick = "toggle('.left_submenu_1')">Opinion</a> 

HTMLは次に機能であなたは、要素を取得し、それが表示状態だ切り替えることができます。

のJavaScript

function toggle(qs) { 
    var e = document.querySelector(qs); 
    e.style.display = e.style.display === 'block' ? 'none' : 'block'; 
} 

要素は状態がNoneを返し、ブロックに等しい表示場合e.style.display === 'block' ? 'none' : 'block'一部が他のブロックを返す、と言っています。

e.style.display =のため、戻り値は新しい要素の表示状態としてあらかじめ設定されています。

Answer 2

それは可能な限り少ないようにそれを修正する動作させるためにTringの：
- アンカータグでonClick="toggle(this)"
を使用する - のようなビット異なるトグル機能を使用します。

function toggle (el) { 
    var e = document.querySelectorAll('.' + el.className.replace('top', 'submenu_'))[0]; 
    e.style.display = e.style.display.match(/none/) ? '' : 'none'; 
} 

それが役に立てば幸い、私小さな一歩を踏み出してevent delegationを検索することを提案しなければなりません。 Bye