在外部單擊時隱藏div類

Question

 function nav_category_show() { var x = document.getElementById("nav_dropdown_items"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <span onclick="nav_category_show()">click here<i class="fa fa-bars"></i></span> <div id="nav_dropdown_items" class="w3-animate-zoom w3-dropdown-content w3-bar-block w3-card-4"> <a href="#" class="w3-bar-item w3-button">Link 1</a> </div> 

我要在div外部單擊時隱藏此#nav_dropdown_items。該怎么辦？ 謝謝！

Answer 1

在nav_category_show函數中添加類之后， nav_category_show使用event.stopPropagation停止事件傳播。

向body添加另一個事件，然后從nav_category_show中刪除該類

 function nav_category_show(e) { var x = document.getElementById("nav_dropdown_items"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace("w3-show", ""); } e.stopPropagation(); } document.body.addEventListener('click', function() { document.getElementById("nav_dropdown_items").classList.remove('w3-show'); }) 

 body { width: 500px; height: 500px; border: 1px solid red; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <span onclick="nav_category_show(event)">click here<i class="fa fa-bars"></i></span> <div id="nav_dropdown_items" class="w3-animate-zoom w3-dropdown-content w3-bar-block w3-card-4"> <a href="#" class="w3-bar-item w3-button">Link 1</a> </div> 

Answer 2

由於您已經在引用jquery，因此可以使用它輕松隱藏/顯示選擇的div：

var target = $("#nav_dropdown_items");
if(target.hasClass("w3-show")) {
  target.hide();  // hides it
  target.removeClass("w3-show");
}
else {
  target.show();  //shows it
  target.addClass("w3-show");
}