Question

我有一个必须切换的菜单（打开和关闭）。同样，如果打开了一个下拉菜单，并且用户单击了其他下拉菜单，则在这种情况下，必须关闭打开的下拉菜单。在我编写的代码中，如果用户单击下一个，则可以实现关闭下拉菜单的方案。但是，单击链接时，下拉菜单不会切换。它只会打开。但是当单击同一链接时，它也必须关闭。

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');
    }
});

HTML代码

<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>

Answer 1

您可以尝试使用布尔变量来保存是否存在该类，然后再将其从所有菜单中删除。像这样：

$('.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')


    }

})

菜单在点击时不切换（关闭）

1 个答案: