单击汉堡包按钮后无法关闭菜单。单击任何项目后，关闭整个菜单屏幕的最佳方式是什么？
我的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
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>
如果您想使用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');
});
}
您可以使用常用的菜单"切换开关"在单击菜单时打开和关闭菜单。
更新：
我觉得事情不是很清楚。所以我在这里添加一些示例代码。注意：我添加了切换开关，随后对菜单eventHandler进行了轻微更改。
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>