I'm trying to build a nested dropdown menu with javascript and click event. My html is this:
<ul>
<li id="menu-item-439" class="dropdown">
<a href="#">hostelería</a>
<ul class="sub-menu">
<li id="menu-item-459">
<a href="#">Comanderos</a>
</li>
<li id="menu-item-457" class="dropdown">
<a href="#">Venta online</a>
<ul class="sub-menu">
<li>
<a href="#">PortalRest Pedidos</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
and my javascript:
document.querySelectorAll('.dropdown').forEach(i => {
i.addEventListener('click', (e) => {
i.classList.toggle('show');
})
});
The problem is in the nested "dropdown" class. When i click in "child dropdown" (id="menu-item-457") toogle not only affects that element but also affects the parent (id="menu-item-439")
Thanks!!
Here
HTML
<ul>
<li id="menu-item-439" class="dropdown">
<a href="#" onclick="toggle()">hostelería</a>
<ul class="sub-menu">
<li id="menu-item-459">
<a href="#">Comanderos</a>
</li>
<li id="menu-item-457" class="dropdown">
<a href="#" onclick="toggle2()">Venta online</a>
<ul class="sub-menu">
<li>
<a href="#">PortalRest Pedidos</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
JS
let n=0, n2=0;
function toggle() {
n++;
if (n%2==0) {
document.getElementsByClassName("sub-menu")[0].style.display="none";
}
else {
document.getElementsByClassName("sub-menu")[0].style.display="block";
}
}
function toggle2() {
n2++;
if (n2%2==0) {
document.getElementsByClassName("sub-menu")[1].style.display="none";
}
else {
document.getElementsByClassName("sub-menu")[1].style.display="block";
}
}
CSS
.sub-menu {display: none}
If you wanted same with JQuery toggle method, then js should be like this
JS
function toggle() {
document.getElementsByClassName("sub-menu")[0].toggle();
}
function toggle2() {
document.getElementsByClassName("sub-menu")[1].toggle();
}