在下拉菜單中，關閉所有其他的下拉菜單

Question

當我點擊頂部菜單中的鏈接「菜單項目01」時，3級下拉菜單定時打開就可以了，之後點擊「菜單項目04」超級菜單打開即可

但我想，當用戶點擊任何其他頂級菜單鏈接時，先前所有的下拉項應該隱藏，一次只能看到一個下拉菜單。

請檢查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{ 

} 

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-子菜單中，.navstyle-子-sub和菜單項的.navstyle，子子子

li ul { 
    display: none; 
} 

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