Question

之前，我做过一项任务，我应该在Javascript中编写代码，以便在网页导航栏中切换每个属于他们自己的topmenu的子菜单的可见性。默认情况下，可见性应设置为隐藏，并且应在单击topmenu时显示。我知道如何为属于topmenu的ONE子菜单切换可见性，但无法使我的代码适用于多个元素。在这里的帮助下，我得到了我的代码。但是，我的老师对我在HTML代码中使用onclick这一事实并不满意。所以现在我的问题是：如何将所有功能移至javascript，从而不在我的HTML中使用onclick？

注意：当然我自己尝试了一下但是我无法使标题和div之间的配对工作正确...通过配对我的意思是div与类的可见性＆＃ 34; left_submenu_1＆＃34;当你点击topmenu＆＃34; left_top1＆＃34;时应该切换。因此，如果div的可见性与班级＆＃34; left_submenu_2＆＃34;单击topmenu＆＃34; left_top2＆＃34;时切换。

我想我应该开始这样的事情：

var left_headings = document.getElementsByClassName("left_top");
for(var k = 0; k < left_headings.length; k++) {
   ??????
}

早期相关问题： Toggle visibility for multiple divs with one function: navigation bar

HTML

 <a class="left_top" onclick = "toggle('.left_submenu_1')">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_top" onclick = "toggle('.left_submenu_2')">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>

的Javascript

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

请注意：我们不允许使用jQuery或提供topmenus id：s，因为我们的想法是使用一个通用函数来切换可见性。

Answer 1

编辑：改变html是不可能的，更新的答案。

不是使用onclick来处理事件，而是通过javascript分配事件处理程序，如下所示（请注意，我为元素添加了ID以便能够正确选择它们）：

jsfiddle：https://jsfiddle.net/pkptn4gf/

<a class="left_top">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_top">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>

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

var clickables = document.getElementsByClassName("left_top");

clickables[0].addEventListener("click", function(){
    toggle('.left_submenu_1');
});
clickables[1].addEventListener("click", function(){
    toggle('.left_submenu_2');
});

切换导航栏

1 个答案: