I'm currently working on a nested dropdown menu feature. Although I have successfully implemented the functionality to display the next level, I am facing an issue where it does not close upon clicking.
Here is the JavaScript snippet:
const nodeList = document.querySelectorAll('.dropdown-menu a.dropdown-toggle');
nodeList.forEach((elem) => {
elem.addEventListener('click', (e) => {
e.stopPropagation();
let parent = elem.offsetParent;
if (!elem.nextElementSibling.classList.contains('show')) {
parent.classList.remove('show');
}
let subMenu = elem.nextElementSibling;
console.log(subMenu);
subMenu.classList.toggle('show');
elem.parentElement.classList.toggle('show');
console.log(elem.parentElement);
});
});