單擊漢堡包按鈕后無(wú)法關(guān)閉菜單。單擊任何項(xiàng)目后關(guān)閉整個(gè)菜單屏幕的最佳方法是什么？我的 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>`我嘗試過(guò)使用 jQuery 但沒(méi)有成功。這是js代碼：`$('.toggler').on('click', function () { $('.menu').toggleClass('open');});$('.menu li').on("click", function () { $('.menu-wrap').toggleClass('open');});`或者是否有更簡(jiǎn)單的方法使用 CSS 來(lái)關(guān)閉菜單？這是要運(yùn)行的代碼筆：https://jsfiddle.net/7rmcx861/#&togetherjs=g5zDdkhjc5
2 回答
ibeautiful
TA貢獻(xiàn)1993條經(jīng)驗(yàn) 獲得超6個(gè)贊
https://jsfiddle.net/h7et0qnv/
此菜單樣式適用于輸入復(fù)選框的情況。如果選中，您的漢堡菜單將可見(jiàn)，否則將隱藏。所以只需要改變它的情況
在你的腳本中寫(xiě)了一個(gè)函數(shù)。
function toggle(){
$(".toggler").prop("checked", false);
}
然后將此函數(shù)放入菜單列表的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貢獻(xiàn)1911條經(jīng)驗(yàn) 獲得超7個(gè)贊
如果你想用 vanilla js 來(lái)做，我建議你使用 CustomEvents。在 React 等框架中可能還有其他方法可以做到這一點(diǎn)。
對(duì)于每個(gè)菜單項(xiàng)，我都會(huì)發(fā)出一個(gè)自定義事件 -
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);
});
}
然后，“菜單”可以對(duì)此自定義事件做出反應(yīng)，并在打開(kāi)時(shí)自行關(guān)閉 -
var menu = document.querySelector('.menu')
if (menu) {
menu.addEventListener('closeMenu', function (e) {
e.currentTarget.classList.remove('open');
});
}
您可以使用常用的菜單“切換器”來(lái)在單擊時(shí)打開(kāi)和關(guān)閉菜單。
更新：
我覺(jué)得事情還不是很清楚。所以我在這里添加一些示例代碼。注意：我添加了切換器，隨后稍微更改了菜單事件處理程序。
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 關(guān)注
- 171 瀏覽
添加回答
舉報(bào)
0/150
提交
取消