Sichtbarkeit für mehrere Divs mit einer Funktion umschalten: Navigationsleiste

Question

Meine Aufgabe: Hallo! Ich mache einen Auftrag in der Schule, wo ich Code in Javascript schreiben soll, um Sichtbarkeit für die Untermenüs zu aktivieren, die jeweils zu ihrem eigenen Topmenü in einer Navigationsleiste für eine Webseite gehören. Die Sichtbarkeit sollte standardmäßig ausgeblendet sein und sollte angezeigt werden, wenn auf ein Topmenü geklickt wird. Ich weiß, wie man die Sichtbarkeit für ein zu einem Topmenü gehörendes ONE-Untermenü umschaltet, aber meinen Code nicht für mehrere Elemente arbeiten lässt. Mein HTML-Code:

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

Mein Problem: Die topmenus Ich spreche von sind "Opinion" und "Economy". Die Sichtbarkeit des div mit der Klasse "left_submenu_1" sollte umgeschaltet werden, wenn Sie auf das Topmenu "left_top1" klicken. Also sollte das visibilily des div mit der Klasse "left_submenu_2" umgeschaltet werden, wenn man auf das Topmenu "left_top2" klickt. Das versage ich. Mein Javascript-Code ist so weit:

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

Wer weiß, wie ich dieses Problem lösen kann? Ich weiß, dass es in der for-Schleife Fehler gibt (wie ich daneben geschrieben habe), aber das ist das Beste, was ich für jetzt schaffen kann.

Bitte beachten Sie: Es ist NICHT erlaubt, jQuery zu verwenden oder die topmenus id: s anzugeben, da eine allgemeine Funktion verwendet werden soll, um die Sichtbarkeit zu ändern. Außerdem sollte der Code, der die Toggle-Funktion aktiviert, in Javascript ausgeführt werden.

Answer 1

Ich würde es nähern, indem ich den Klassennamen des div, um gezeigt zu werden (oder versteckt) in die Funktion, um mit zu beginnen.

HTML

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

Dann in der Funktion können Sie das Element greifen und schalten Sie es Anzeigezustand ist.

JavaScript

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

Der e.style.display === 'block' ? 'none' : 'block' Teil sagt, ist, wenn die Elemente keiner zu blockieren, die Rück Zustand gleich anzuzeigen, andernfalls Block zurückzukehren.

Der Rückgabewert wird aufgrund der e.style.display = im Voraus als neuer Anzeigezustand des Elements festgelegt.

Answer 2

Tring, um sie möglichst weniger Modifizierung funktioniert:
- verwenden onClick="toggle(this)" in die Anker-Tags
- wie ein bisschen anders Toggle-Funktion verwenden:

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

hoffe, es hilft, aber ich Ich muss Ihnen vorschlagen, einen kleinen Schritt vorwärts zu machen und nach event delegation zu suchen. Tschüss