汉堡菜单需要点击2下才能重新打开。冲突jquery？

要再次访问移动导航菜单，我需要单击汉堡图标两次

地点在这里

复制步骤：

• 确保浏览器正在查看手机，或至少是平板电脑宽度，以便汉堡图标仅显示在导航栏上
• 滚动超过100vh以确保导航栏处于视野内
• 单击汉堡图标（将显示菜单）
• 单击导航项目，即“自行车”
• 导航菜单将折叠，您将被引导到“自行车”部分
• 单击汉堡包图标（单击时不会显示菜单）
• 单击汉堡包图标（现在将显示菜单，并按预期工作）

我的代码如下：

  function initMenu()
  {
    if($('.hamburger').length && $('.menu').length)
    {
      var hamb = $('.hamburger');

      hamb.on('click', function()
      {
        if(!menuActive)
        {
          openMenu();
        }
        else
        {
          closeMenu();
        }
      });
    }
  }

  function openMenu()
  {
    menu.addClass('active');
    menuActive = true;
  }

  function closeMenu()
  {
    menu.removeClass('active');
    menuActive = false;
  }

我在移动导航栏中单击并锚定的逻辑如下

$('.menu_nav_list a').on('click', function(e){  
    e.preventDefault();                         
    $(this).closest('.menu').removeClass('active');  
});

我认为代码的第二部分需要包含函数“closeMenu（）”——我一直在尝试将该函数添加到代码的第二部分，但没有任何影响

第一段代码是在一个单独的js文件中，第二部分只是链接到HTML文件中，在单独js文件的链接/引用下面-所以我们希望该函数可以使用

---

是否有一种方法可以将这两种方法结合起来，以便单击“.menu\u nav\u list”锚也会触发函数closeMenu（）？

问题是，您的单击逻辑只是删除类。它没有改变状态变量

$('.menu_nav_list a').on('click', function(e){
    e.preventDefault();
    $(this).closest('.menu').removeClass('active');
    menuActive = false;
});

这就是为什么在DOM中使用反映状态的有状态变量是一个坏主意的原因。你必须保持两者。如果您选择了

menu.hasClass（'active'）

来获取该布尔值，而不是维护menuActive，那么您将保存一个额外的变量，并且永远不会冒失去同步的风险

编辑：或者像您在最后所说的那样，您的单击处理程序可以重用

closeMenu（）

方法，而无需重复该逻辑。看起来就像：

$('.menu_nav_list a').on('click', function(e){
    e.preventDefault();
    closeMenu();
});

---

如果您使用

active

类控制菜单的状态，那么

menuActive

变量是不必要的<代码>菜单。hasClass（'active'）将为您提供该布尔值，而无需维护辅助状态变量。令人沮丧的是，这不起作用。您是否愿意成为一名明星，使用closeMenu（）函数向我展示代码的外观？如果实现有问题，我会非常感激。我在您的页面上放置了一条调试器语句，它会检查menuActive是否为false以打开菜单，如果您必须双击，则在第一次单击时仍然为true