单击下拉菜单，关闭所有其他下拉菜单

Question

当我点击顶部菜单时 link "menu item 01" 3 级下拉菜单定期打开就可以了，然后点击 "menu item 04" 大型菜单打开就可以了

但是我想要，当用户点击任何其他顶部菜单时 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{

}

Answer 1

我不提倡或建议您使用重要的样式，但是您的 css 可以简化很多，这样就没有必要了，我不想重构您的所有样式css.

解决方案是将打开的 class 添加到列表项中，它的样式会影响 child 是否应该打开。

还有一个检查，只有当您单击新的列表项时，打开的 class 才会从列表项中删除。

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

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

如何删除非常具体的样式和不必要的重复，您需要将样式重新添加到列表项。但这摆脱了所有不必要的 .navstyle-submenu、.navstyle-submenu-sub 和 .navstyle-submenu-sub-sub

li ul {
    display: none;
}

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

单击下拉菜单，关闭所有其他下拉菜单

On dropdown click, close all other dropdowns

html

javascript

css

jquery

drop-down-menu