Question

我的作业：嗨！我正在学校做作业，我应该在Javascript中编写代码，以便在网页的导航栏中切换属于他们自己的topmenu的子菜单的可见性。默认情况下，可见性应设置为隐藏，并且应在单击topmenu时显示。我知道如何为属于topmenu的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是＆＃34;意见＆＃34;和经济＆＃34;。 div的可见性与班级＆＃34; left_submenu_1＆＃34;当你点击topmenu＆＃34; left_top1＆＃34;时应该切换。因此，如果div的可见性与班级＆＃34; left_submenu_2＆＃34;单击topmenu＆＃34; left_top2＆＃34;时切换。这是我没能做到的。我的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或给出topmenus id：s，因为我们的想法是使用一个通用函数来切换可见性。此外，启用切换功能的代码应该在Javascript中完成。

Answer 1

尽量减少修改它的工作：
- 在锚点标签中使用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。再见

Answer 2

我会通过将要显示（或隐藏）的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 =，返回值被设置为新元素显示状态。

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

2 个答案: