单击时菜单未切换(关闭)

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

网页代码

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

    }
})