单击某个项目后如何关闭汉堡菜单？
单击汉堡包按钮后无法关闭菜单。单击任何项目后关闭整个菜单屏幕的最佳方法是什么？
我的 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
哔哔one2回答
-
ibeautiful
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猫小萌
如果你想用 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>
随时随地看视频慕课网APP
相关分类
Html5