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

Question

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

我的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

Answer 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>

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

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

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

您可以使用通常的菜单 'toggler' 在单击时打开和关闭菜单。

更新：

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

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>

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

How do I close a Hamburger Menu once an Item is clicked?

javascript

jquery

html

css

hamburger-menu

更新：