單擊漢堡包按鈕后無法關閉菜單。單擊任何項目后關閉整個菜單屏幕的最佳方法是什么？我的 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條經驗 獲得超6個贊
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 關注
- 176 瀏覽
添加回答
舉報
0/150
提交
取消