使用一个功能切换多个div的可见性:导航栏

Question

我的任务：嗨！我在学校里做了一项作业，我应该用Javascript编写代码，以便在网页的导航栏中切换子菜单的可见性，每个子菜单都属于自己的顶部菜单。默认情况下，可见性应设置为隐藏，并且应在单击顶部菜单时显示。我知道如何切换属于顶层菜单的一个子菜单的可见性，但无法使我的代码适用于多个元素。我的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>

我的问题：我所说的最重要的是"意见"one_answers"经济"。当您单击顶部菜单"left_top1"时，应切换类为"left_submenu_1"的div的可见性。因此，当您单击最上面的菜单"left_top2"时，是否应该切换类为"left_submenu_2"的div的可见性。这就是我失败的地方。我的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循环中有错误（正如我在旁边写的那样），但这是我目前能处理的最好的错误。

请注意：我们不允许使用jQuery或提供最顶层的id:s，因为我们的想法是使用一个通用函数来切换可见性。此外，启用切换功能的代码应该用Javascript完成

Answer 1

我会通过将要显示（或隐藏）的div的类名传递到函数中来处理它。

HTML

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

然后在函数中，您可以获取元素并切换其显示状态。

JavaScript

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

e.style.display === 'block' ? 'none' : 'block'部分表示，如果元素显示状态等于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。再见