Несколько выпадающих меню с использованием того же кода JS

Question

У меня есть простое раскрывающееся меню с использованием JavaScript.

<div id="show-nav" class="dropdown"> 

    <div id="dropdown" onClick="myFunction()">Menu Name</div> 

      <div id="myDropdown" class="dropdown-content"> 

       <a href="#option1">Option 1</a> 
       <a href="#option2">Option 2</a> 
       <a href="#option3">Option 3</a> 

      </div> 

     </div> 

И JS:

<script> 

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction() { 
document.getElementById("myDropdown").classList.toggle("show"); 
} 

// Close the dropdown menu if the user clicks outside of it 
window.onclick = function(event) { 
if (!event.target.matches('#dropdown')) { 

var dropdowns = document.getElementsByClassName("dropdown-content"); 
var i; 
for (i = 0; i < dropdowns.length; i++) { 
    var openDropdown = dropdowns[i]; 
    if (openDropdown.classList.contains('show')) { 
    openDropdown.classList.remove('show'); 
    } 
} 
} 
} 

</script> 

У меня есть несколько копий одного и того же меню в нескольких смежных дивы. С помощью этого кода меню работает в первом элементе, но если я попытаюсь переключить его во втором, он только опустится в первом. Как я могу сделать эту работу для нескольких меню на одной странице?

Answer 1

Вам необходимы два изменения в вашем коде:

• сделать все кнопки onClick атрибуты одинаковы. (Я предполагаю, что это «myFunction();»)
• Измените обработчик, чтобы обработать кнопку, которая на самом деле нажата.

Это возможно с event.target:

function myFunction(event) { 
    event.target.classList.toggle("show"); 
} 

Answer 2

К myFunction перевала this. То есть:

<div id="dropdown" onClick="myFunction(this)">Menu Name</div> 

Написать функцию JavaScript, как показано ниже:

function myFunction(a) { 
    a.parentNode.getElementsByClassName("dropdown-content")[0].classList.toggle("show"); 
} 

Нет необходимости в том, что большая часть JavaScript: держать как можно более простым.

Код статьи: