邊欄菜單在點擊時不會折疊

Question

當用戶單擊左側的垂直黑色邊框時，將顯示側邊欄菜單，但是當我單擊關閉按鈕時，它不會折疊。 我希望它以與javascript或jquery相同的動畫關閉。

<div id="mySidenav" class="sidenav" onclick="openNav()" style="cursor: pointer;">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav</h2>

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>

演示https://jsfiddle.net/1n6bajmh/

Answer 1

它不起作用，因為您在嵌套元素上注冊了兩個onclick事件處理程序。

當您單擊內部的一個元素以關閉菜單時，確實會正確調用closeNav函數，但是click事件會在DOM樹中向上傳播，到達ID為“ mySidenav”的父ID。

現在，div還具有注冊的onclick處理程序，該處理程序也將被觸發，因此還調用了openNav函數。

您需要防止事件向上傳播並到達div，因此可以使用event.stopPropagation（）。

看一下這個：

 function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav(event) { event.stopPropagation(); document.getElementById("mySidenav").style.width = "0"; } 

 body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 15px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } } 

 <meta name="viewport" content="width=device-width, initial-scale=1"> <div id="mySidenav" class="sidenav" onclick="openNav()" style="cursor: pointer;"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav(event)">&times;</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <h2>Animated Sidenav</h2> 

我建議您在這里閱讀更多有關事件冒泡的信息： https : //developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events

Answer 2

如果您在openNav中更改代碼以同時處理打開和關閉，它將解決此問題。

function openNav() {
  var w = document.getElementById("mySidenav").style.width;
  if(w === "250px"){
    document.getElementById("mySidenav").style.width = '2px';
  }else {
   document.getElementById("mySidenav").style.width = '250px';
  }
}