Dropdowm Menü in Vanille JavaScript - für unbekannte Anzahl von Tasten

Question

bitte, können Sie mir einen Tipp mit Vanilla JS geben?

Ich habe Drop-Down-Menü Öffnung über den Button klicken und haben zwei Probleme:

1) Dropdown wird durch Klicken auf die Schaltfläche mit eindeutigen ID zu öffnen. Ich muss es arbeiten auf Klasse Name zu bekommen, weil es auf mehrere Tasten arbeiten muss - und die Anzahl von ihnen ist unbekannt (sie werden von REST API geladen). In jQuery funktioniert es, aber ich brauche es in Vanilla JS.

Wenn ich versuche, Knopf nach Klassennamen zu wählen, wird es Array von Schaltflächen zurückgeben, aber ich weiß nicht, wie aus Array auszuwählen, auf welche Schaltfläche geklickt wurde.

2) Dropdown-Menü öffnet nur auf den zweiten Klick auf die Schaltfläche (und dann ist es Umschalten wie es sollte), aber der erste Klick tut nichts.

Mein Code ist hier:

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

Und funktionierender Prototyp ist hier auf Codepen: https://codepen.io/vlastapolach/pen/EXdLMy

Bitte, haben Sie irgendwelche Ideen, wie dieses Problem beheben?

Vielen Dank!

Answer 1

Ganz einfach, benötigen Sie eine allgemeine Funktion, die auf dem Kontext arbeitet (= this):

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

Jetzt können Sie diese Funktionen als Event-Handler zuweisen auf alle Elemente:

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

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

Beachten Sie, dass NodeList.forEach ganz neu ist, verwenden [] .slice ein echtes Array erstellen ...

Und Sie müssen die Handl zuweisen ers an die neu manuell hinzugefügten Elemente, oder müssen Sie auf Fenster hören und das Ziel zurückverfolgen:

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