单击链接或按钮时关闭汉堡菜单答案

【问题标题】：Close hamburger menu when clicking on link or button单击链接或按钮时关闭汉堡菜单
【发布时间】：2021-06-13 01:37:54
【问题描述】：

单击内部或按钮上的链接时，我试图关闭我的汉堡菜单。我不太擅长 Javascript，所以我只是整理了一些我在网上找到的代码。但是，如果我添加代码的第二部分，它会在单击链接时关闭，但在单击按钮时不会再关闭。如果我只留下第一部分，它会在单击按钮时关闭，而不是链接。

    // Hamburger Menu

$(document).ready(function () {
  var $mainmenu = $(".main-menu"),
    $hamburger = $(".hamburger");

  $hamburger.click(function () {
    $hamburger.toggleClass("open");
    $mainmenu.toggleClass("open");
    return false;
  });


// Close Menu when click on Link

  $(".hamburger").on("click", function () {
    $(".main-menu").addClass("open");
  });

  $(".main-menu a").on("click", function () {
    $(".main-menu").removeClass("open");
  });
});

我觉得有一个简单的解决方案，由于我缺乏知识，我找不到。我真的希望有人能帮助我！提前致谢。

【问题讨论】：

标签： javascript hamburger-menu

【解决方案1】：

首先，您不需要在 $hamburger.click 函数中返回 false。对于未来，您应该指定按钮是什么，因为您实际上只提供了类或附加屏幕截图，以便更好地可视化。

假设 .hamburger 是您的按钮，您的代码可能看起来像这样

$(document).ready(() => {
  var $mainmenu = $(".main-menu"),
    $hamburger = $(".hamburger");

  $hamburger.click(() => {
    $mainmenu.toggleClass("open");
  });

// Close Menu when click on Link
  $(".main-menu a").on("click",() => {
     $mainmenu.removeClass("open");
  });
});

【讨论】：