单击汉堡包按钮后无法关闭菜单。单击任何项目后关闭整个菜单屏幕的最佳方法是什么？我的 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
2 回答
ibeautiful
TA贡献1993条经验 获得超5个赞
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>
Smart猫小萌
TA贡献1911条经验 获得超7个赞
如果你想用 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>
- 2 回答
- 0 关注
- 51 浏览
添加回答
举报
0/150
提交
取消