Question

我试图在单击内部链接或按钮时关闭我的汉堡菜单。我不太擅长 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");
  });
});

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

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

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

1 个答案: