Why does this code do not works?
in theory it seems to do instead… but no.
<!DOCTYPE html>
<html>
<head>
<title>prova js</title>
</head>
<body>
<h1>js menu flush</h1>
<ul id="wrap">
<li id="menu-item-658" class="menu-item-has-children ul-submenu-li">
<a title="tre" href="#">tre</a>
<ul class="submenu-submenu">
<li id="menu-item-663" class="menu-item-has-children">
<a title="due" href="#">due</a>
<ul class="ul-submenu">
<li id="menu-item-664" class="menu-item-664">
<a title="uno" href="#">uno</a>
</ul>
</ul>
</li>
</ul>
</body>
<p class="menu-item-description">Le maniglie perfette</p></li>
<script>
document.addEventListener("DOMContentLoaded",function(event){
let appendix_wrap = document.getElementById("wrap");
let hafigli_liv2 = appendix_wrap.querySelectorAll('ul.ul-submenu');
hafigli_liv2.forEach(ul_li_liv2 => {
ul_li_liv2.addEventListener("click", (lk_liv2) => {
const link_liv2 = lk_liv2.target.closest('ul.ul-submenu li.menu-item-has-children a');
this.preventDefault(); //evita che cambi pagina
});
});
});
</script></body>
</html>
The logic is that i click in A element inside some UL and LIs and ULs and LIs and it has to not open the link.
Please help