Переключить видимость для нескольких divs для панели навигации

Question

Раньше я выполнял задание, в котором я должен был писать код в Javascript, чтобы переключать видимость для подменю, принадлежащего их собственному topmenu, в панели навигации для веб-страницы. Видимость должна быть скрыта по умолчанию и должна отображаться при нажатии на верхнее меню. Я знаю, как переключать видимость для подменю ONE, принадлежащего к топменю, но не могу заставить мой код работать для нескольких элементов. С помощью здесь я получил свой код для работы. Однако мой учитель был недоволен тем фактом, что в своем HTML-коде я использовал onclick. So вопрос сейчас: Как мне переместить все функциональность javascript, и тем самым неonclick в моем HTML?

Примечание: Конечно, я дал ему попробовать себя, но я не могу сделать спаривание между заголовком и сНом работать правильно ... спаривание я имею в виду, что видимость DIV с классом «left_submenu_1» должно быть переключен когда вы нажимаете topmenu «left_top1». Таким образом, при визуальном выборе div с классом «left_submenu_2», когда вы нажимаете topmenu «left_top2».

Я предполагаю, что я должен начать что-то вроде этого:

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 идентификатор: S, так как идея заключается в том, чтобы использовать одну общую функцию для переключения видимости.

Answer 1

EDIT: Изменение html не может быть и речи, обновленный ответ.

Вместо того, чтобы использовать OnClick для обработки события, назначить EventHandler с помощью JavaScript, как это (Обратите внимание, что я добавил идентификаторы элементов для того, чтобы быть в состоянии выбрать их правильно):

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'); 
});