单击 link 或按钮时关闭汉堡包菜单

Question

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

    // 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");
  });
});

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

Answer 1

首先，您不需要在 $hamburger.click 函数中设置 return 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");
  });
});

单击 link 或按钮时关闭汉堡包菜单

Close hamburger menu when clicking on link or button

javascript

hamburger-menu