我有一个必须切换的菜单(打开和关闭).同样,如果打开了一个下拉菜单,并且用户单击了其他下拉菜单,则在这种情况下,必须关闭打开的下拉菜单.在我编写的代码中,如果用户单击下一个,则可以实现关闭下拉菜单的方案.但是,单击链接时,下拉菜单不会切换.它只会打开.但是单击同一链接时,它也必须关闭.
js代码.
$('.header-nav-menu .header-menu a.menu-item').click(function(e) {
e.preventDefault();
$('.header-nav-menu .header-menu ').removeClass('show-menu-dropdown');
if ($(this).closest('.header-menu').hasClass('show-menu-dropdown')) {
$(this).closest('.header-menu').removeClass('show-menu-dropdown');
} else {
$(this).closest('.header-menu').addClass('show-menu-dropdown');
}
});
<div class="header-menu third-level">
<a href="/en/who-we-are" class="menu-item ">Who We Are </a>
<li class="no-submenu">
<div class="menu-item">
<a href="" class="sub-category active">Our Brand</a>
</div>
</li>
</div>
最佳答案
您可以尝试使用布尔变量来保存是否存在该类,然后再将其从所有菜单中删除.像这样：
$('.header-nav-menu .header-menu a.menu-item').click(function(e){
e.preventDefault();
var hasClass = $(this).closest('.header-menu').hasClass('show-menu-dropdown');
$('.header-nav-menu .header-menu ').removeClass('show-menu-dropdown');
if (hasClass){
$(this).closest('.header-menu').removeClass('show-menu-dropdown')
}else{
$(this).closest('.header-menu').addClass('show-menu-dropdown')
}
})