单击项目后如何关闭汉堡菜单？答案

【问题标题】：How do I close a Hamburger Menu once an Item is clicked?单击项目后如何关闭汉堡菜单？
【发布时间】：2020-04-11 21:00:36
【问题描述】：

单击汉堡按钮后无法关闭菜单。单击任何项目后关闭整个菜单屏幕的最佳方法是什么？

我的 HTML 是：

`<body>
  <div class="menu-wrap">
    <input type="checkbox" class="toggler">
    <div class="hamburger">
      <div></div>
    </div>
    <div class="menu">>
      <div>
        <div>
          <ul>
            <li><a href="#Home">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>`

我尝试过使用 jQuery，但没有成功。这是js代码：

`$('.toggler').on('click', function () {
    $('.menu').toggleClass('open');
});
$('.menu li').on("click", function () {
    $('.menu-wrap').toggleClass('open');
});`

或者如果有更简单的方法使用 CSS 来关闭菜单？

这是要运行的代码笔：https://jsfiddle.net/7rmcx861/#&togetherjs=g5zDdkhjc5

【问题讨论】：

我猜$('.menu').removeClass('open');
你可以创建一个 jsfiddle
这是 jsfiddle @Çağrı jsfiddle.net/wqg0zpr8/#&togetherjs=JlSyLJtclH 没有向其中添加 javascript。我不确定我的 css 是否与之冲突。
@adiesman217 现在我明白了你在小提琴中的意思并更新了我的答案。你可以检查一下

标签： javascript jquery html css hamburger-menu

【解决方案1】：

https://jsfiddle.net/h7et0qnv/

此菜单样式适用于输入复选框的情况。如果选中，您的汉堡菜单会变得可见，否则会被隐藏。所以只需要改变它的情况

在您的脚本中编写了一个函数。

function toggle(){
    $(".toggler").prop("checked", false);
}

然后把这个函数放到菜单列表的onclick事件中

<li><a onclick="toggle()" href="#Home">Home</a></li>
 <li><a onclick="toggle()" href="#About">About</a></li>
 <li><a onclick="toggle()" href="#">Menu</a></li>
 <li><a onclick="toggle()" href="#">Contact</a></li>

【讨论】：

【解决方案2】：

如果你想用 vanilla js 来做，我建议你使用 CustomEvents。在 React 等框架中可能还有其他方法可以做到这一点。

对于每个菜单项，我都会发出一个自定义事件 -

var menuItems = document.querySelectorAll('.menu li');

for (var i = 0; i < menuItems.length; ++i) {
  menuItems[i].addEventListener('click', function(e) {
    var closeEvent = new CustomEvent('closeMenu', {
      bubbles: true,
    });
    e.currentTarget.dispatchEvent(closeEvent);
  });
}

然后“菜单”可以对此自定义事件做出反应并在打开时自行关闭 -

var menu = document.querySelector('.menu')
if (menu) {
  menu.addEventListener('closeMenu', function (e) {
    e.currentTarget.classList.remove('open');
  });
}

您可以使用通常的菜单“切换器”在单击菜单时打开和关闭菜单。

更新：

我想事情不是很清楚。所以在这里我添加了一些示例代码。注意：我添加了切换器，随后稍微更改了菜单事件处理程序。

var menuItems = document.querySelectorAll('.menu li');

for (var i = 0; i < menuItems.length; ++i) {
  menuItems[i].addEventListener('click', function(e) {
    var closeEvent = new CustomEvent('closeMenu', {
      bubbles: true,
    });
    e.currentTarget.dispatchEvent(closeEvent);
  });
}

var menu = document.querySelector('.menu')
var toggler = document.querySelector('.toggler')
if (menu && toggler) {
  menu.addEventListener('closeMenu', function(e) {
    menu.classList.remove('open');
    toggler.checked = false;
  });
  toggler.addEventListener('click', function(e) {
    menu.classList.toggle('open');
  });
}

.menu {
  background-color: white;
  display: inline-block;
  padding-right: 1rem;
}

.menu.open {
  visibility: visible;
}

.menu {
  visibility: hidden;
}

<div class="menu-wrap">
  <input type="checkbox" class="toggler" checked>
  <div class="hamburger">
    <div></div>
  </div>
  <div class="menu open">
    <div>
      <div>
        <ul>
          <li><a href="#Home">Home</a></li>
          <li><a href="#About">About</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

【讨论】：

我已经尝试使用您的代码，但仍然无法正常工作。我相信我的 CSS 可能会与它发生冲突。你介意检查我的代码：jsfiddle.net/7rmcx861/#&togetherjs=g5zDdkhjc5
@ladiesman217 我用代码 sn-ps 更新了上面的答案。希望这有助于重现结果。