バニラのドロップダウンメニューJavaScript - 不明な数のボタンについて

Question

お願い、バニラJSのヒントを教えてください。

私はボタンのクリックを経由して、ドロップダウンメニューの開口部を持っており、2つの問題があります。

1）をドロップダウンには、一意のIDを持つボタンをクリックして開いています。 - 複数のボタンで作業する必要があるため、クラス名にはが必要です。その数は不明です（REST APIからロードされます）。 jQueryでは動作していますが、バニラJSで必要です。

クラス名でボタンを選択しようとすると、ボタンの配列が返されますが、どのボタンをクリックしたかはわかりません。

2）ドロップダウンメニューは、ボタンの2回目のクリックでのみ開くようになりますが、最初のクリックは何もしません。

私のコードはここにある： https://codepen.io/vlastapolach/pen/EXdLMy

してください、あなたはこの問題を解決する方法任意のアイデアを持っています：

// select Button - now by ID - but I need unknown number of buttons - from REST API - and the code working for all of them 
var btn = document.getElementById("dropBtn1"); 

// select Dropdown menu - next to the button - to be sure it will open the right menu no matter which button will be pressed 
var menu = btn.nextSibling; 
while(menu && menu.nodeType != 1) { 
    menu = menu.nextSibling 
} 

//toggle dropdown menu open/close 
btn.addEventListener("click", function() { 
    if (menu.style.display == 'none') { 
    menu.style.display = 'block'; 
    } 
    else { 
    menu.style.display = 'none'; 
    } 
}); 

とワーキングプロトタイプはCodepenにここにいるのですか？

ありがとうございました！

Answer 1

非常に簡単、あなたはコンテキスト（=本）上で動作し、一般的な機能を必要とする：

//toggle dropdown menu open/close 
function toggle() { 
    var btn=this; 

    var menu = btn.nextSibling; 
    while(menu && menu.nodeType != 1) { 
    menu = menu.nextSibling 
    } 

    if(!menu) return; 

    if (menu.style.display != 'block') {//fix 2) 
    menu.style.display = 'block'; 
    } else { 
    menu.style.display = 'none'; 
    } 
}); 

今、あなたはすべてのあなたの要素にイベントハンドラとして、この機能を割り当てることができます。

window.addEventListener("DOMContentLoaded",function(){ 

    document.querySelectorAll(".sth").forEach(function(btn){ 
    btn.addEventListener("click",toggle,true); 
    }); 
}); 

NodeList.forEachはかなり新しいもので、実際の配列を作成するために[] .sliceを使用することができます...

そして、あなたはHandlを割り当てる必要があることを注意手動で新しく追加された要素へのERS、またはあなたが窓に耳を傾け、ターゲットをバックトレースする必要があります。

window.onclick=function(event){ 
    if(event.target.classList.contains("sth")){ 
    toggle.call(event.target); 
    } 
};