Upon clicking on the top menu link "menu item 01", the 3 level drop down opens as expected. Similarly, when you click on "menu item 04", the mega menu expands perfectly.
However, I am looking to achieve a functionality where if the user clicks on any other top menu link, all previously opened dropdown items should be hidden, leaving only one dropdown visible at a time.
To see an example, please visit this link.
var mymenu = window.matchMedia("screen and (min-width: 781px)")
if (mymenu.matches){
$(function() {
$('.navstyle-list li a, .navstyle-submenu li a, .navstyle-submenu-sub-sub li a').click(function(){
$(this).next('.navstyle-submenu').toggle(300);
$(this).next('.navstyle-submenu-sub').toggle(300);
$(this).next('.navstyle-submenu-sub-sub').toggle(300);
$(this).next('.megamenu').toggle(60);
});
$(document).click(function(e){
var target = e.target;
if (!$(target).is('.navstyle-list li a, .navstyle-submenu li a, .navstyle-submenu-sub-sub li a') && !$(target).parents().is('.navstyle-list li a, .navstyle-submenu li a, .navstyle-submenu-sub-sub li a')) {
$('.navstyle-submenu, .navstyle-submenu-sub, .navstyle-submenu-sub-sub, .megamenu').hide(100);
}
});
});
}
else{
}