Question

当我点击顶部菜单链接“菜单项01”3级下拉菜单定时打开就可以了，点击“菜单项04”后菜单打开就可以了

但是我想，当用户点击任何其他顶级菜单链接之前所有下拉项目都应该隐藏时，一次只能看到一个下拉菜单。

 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。

解决方案是将开放类添加到列表项，然后它的样式会影响子项是否应该打开。

还有一个检查，以便只有当您点击一个新的列表项时才会从列表项中删除开放类。

$('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;
}

在下拉列表中单击，关闭所有其他下拉列表

1 个答案: