同じ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> 

私はいくつかの隣接のdiv内の同じメニューの複数のコピーを持っています。このコードでは、メニューは最初の要素で機能しますが、2番目の要素で切り替えると、最初の要素にのみドロップされます。どのようにして、このページを1つのページ上の複数のメニューに対応させることができますか？あなたはあなたのコード上の2つの変更を必要とする

Answer 1

：

• は同じ属性onClickすべてのボタンを作成します。 （私はそれが "myFunction（）;"だと思います）
• 実際にクリックされたボタンを処理するようにハンドラを変更します。

これはevent.targetで可能です：

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

Answer 2

myFunctionパスthisへ。それは次のとおりです。

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

のJavaScriptのそれくらいの必要がありません：可能な限りシンプルに保つ

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

はJavaScript関数以下のように書きます。