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

Posted 2023-04-13

【中文标题】单击时菜单不切换（关闭）

【英文标题】：Menu not toggling(closing) on click

【发布时间】：2019-06-23 01:38:39

【问题描述】：

我有一个必须切换（打开和关闭）的菜单。此外，如果一个下拉菜单打开，并且用户单击其他下拉菜单，那么在这种情况下，打开的下拉菜单必须关闭。在我编写的代码中，如果用户单击下一个，我可以实现关闭下拉列表的场景。但是单击链接时下拉菜单不会切换。它只会打开。但是当点击相同的链接时它也必须关闭。

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>

【问题讨论】：

尝试删除此行：$('.header-nav-menu .header-menu ').removeClass('show-menu-dropdown');

能否提供完整的 CSS 代码？

@alanfcm 如果我删除它，那么当单击另一个下拉菜单时关闭的场景将失败。

【参考方案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')


    

)