[英]mobile menu toggle button doesnt close
我的 javascript 代碼在切換移動菜單的打開和關閉時遇到了一些問題。 以下代碼適用於打開菜單 = style.height: 200px,但是一旦打開菜單,單擊按鈕不會按預期關閉菜單欄 (style.height: 0)。
任何人也有一些指示,我的代碼哪里出錯了?
document.getElementById("hamburger").addEventListener("click", toggleNav); function toggleNav(){ navSize = document.getElementById("mobilemenu").style.height; if (navSize == 200) { return close(); } return open(); } function open() { document.getElementById("mobilemenu").style.height = "200px"; } function close() { document.getElementById("mobilemenu").style.height = "0"; }
<div class="menubutton"> <button id="hamburger" class="hamburger hamburger--collapse" type="button" onclick="toggleNav()"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> </div>
您正在測試toggleNav()
中的錯誤值
使用if (navSize == "200px")
這是錯誤的代碼:
if (navSize == 200) {
return close();
}
return open();
navSize 將類似於"200px"
,而不是200
由於 if 語句總是假的,它只運行open()
您可以使用classList.toggle簡單地做到這一點
document.getElementById("hamburger").addEventListener("click", function (e) { e.preventDefault(); document.getElementById("mobilemenu").classList.toggle('show'); });
.menubutton { position: fixed; top:10px; left:10px; z-index: 999; } #mobilemenu { position: fixed; top: 0; left: 0; bottom: 0; width: 200px; transform: translateX(-100%); border-right: 1px solid #ccc; background-color: #eee; transition: transform.3s ease; } #mobilemenu.show { transform: translateX(0); }
<div class="menubutton"> <button id="hamburger" class="hamburger hamburger--collapse" type="button"> <span class="hamburger-box"> <span class="hamburger-inner">Click</span> </span> </button> </div> <div id="mobilemenu"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.