Here is the HTML code I have for my navigation menu:
<nav role="navigation" class="nav">
<ul class="nav-items">
<li class="nav-item">
<a href="#" class="nav-link"><span>About Us</span></a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link"><span>Divisions</span></a>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item"><a href="#" class="submenu-link">Div 1</a></li>
<li class="submenu-item"><a href="#" class="submenu-link">Div 2</a></li>
</ul>
</nav>
</ul>
</nav>
This is my JavaScript code:
$(document).ready(function() {
[].slice.call(document.querySelectorAll('.dropdown .nav-link'))
.forEach(function(el) {
el.addEventListener('click', onClick, false);
});
function onClick(e){
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}
function showSubMenu(el){
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e){
e.preventDefault();
if(el.contains(e.target)){
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
function hideSubMenu(el){
el.classList.remove('show-submenu');
}
});
I am facing an issue where the on-click action is not working. Can someone please provide some guidance? I found this code in an online tutorial and I am new to JavaScript. Any corrections or suggestions would be greatly appreciated. Thank you!