CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
Ravi Gadhiya
Ravi Gadhiya

Reputation: 390

On dropdown click, close all other dropdowns

When I click on top menu link "menu item 01" 3 level drop down open regularly it is OK, After that click on "menu item 04" mega menu is open it is OK

BUT I want, when user click on any other top menu link previous all drop down item should hide, only one drop down visible at one time.

Please check 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{

}

Upvotes: 0

Views: 9450

Answers (1)

Dan
Dan

Reputation: 340

I don't advocate or suggest that you should use important styling, but your css could be simplified a lot so that this wouldn't be necessary and I don't want to refactor all of your css.

The solution is to add the open class to the list item, it's styling then affecting whether or not the child should open.

There is also a check in place so that the open class is only removed from the list item if you are click to a new list item.

$('a').on('click', function(){
    if(!$(this).parents().hasClass('open')){
        $('li').removeClass('open');    
    }
    $(this).parent().addClass('open');
});

http://jsfiddle.net/ag46ct2u/9/

How you could remove the very specific styling and unnecessary duplication, you would need to re add the styling to the list items. But this gets rid of all of the unnecessary .navstyle-submenu, .navstyle-submenu-sub and .navstyle-submenu-sub-sub

li ul {
    display: none;
}

li.open > ul, li.open > div {
    display: block;
}

Upvotes: 2

Related Questions