jQuery點選頁面其他地方隱藏指定元素詳解

admin發表於2018-12-02
jQuery

很多效果有這樣類似功能，點選頁面的其他地方時，能夠隱藏一個指定的元素。

比如在模擬實現的select下拉選單效果中，當下拉選單出現的時候，往往希望當點選頁面其他地方的時候，能夠隱藏下拉條，下面就通過一個例項單獨介紹一下如何實現此功能。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
.main{
  cursor:pointer;
}
.list{
  border:1px solid black;
  display:none;
}
.list li{
  cursor:pointer;
  border:1px solid red;
  list-style:none;
}
#noPopEvent{
  width:100px; 
  height:100px; 
  background-color:blue;
  font-size:12px;
  margin:200px;
  text-align:center;
  line-height:100px;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".main").click(function(e){ 
    $(".list").toggle(); 
    e.stopPropagation();
  })
   
  $(document).click(function(){ 
    $(".list").hide(); 
  }) 
   
  $(".list li").click(function(){ 
    $(".main").text($(this).text()); 
    $(".list").hide(); 
  }) 
  $("#noPopEvent").click(function(e){ 
    e.stopPropagation(); 
  }) 
}); 
</script>
</head>
<body>
<div style="width:200px;margin:20px;">
  <div class="main">螞蟻部落</div>
  <div class="list">
    <ul>
      <li>div+css教程</li>
      <li>javascript教程</li>
    </ul>
  </div>
</div>
<div id="noPopEvent">點我不行</div>
</body>
</html>

點選螞蟻部落能夠出現二級選單，當點選頁面的其他任何地方都會隱藏此二級選單，但是點選藍色的部分不能夠隱藏二級選單，下面介紹一下實現過程。

一.實現原理:

原理很簡單，藍色區域的click事件新增阻止事件冒泡的功能，其他的地方都沒有阻止事件冒泡，所以當點選其他地方的時候，事件能夠冒泡到document，然後將二級下拉才選單隱藏。

二.程式碼註釋:

（1）.$(document).ready(function(){ })，當文件結構載入岸壁再去執行函式中的程式碼。

（2）.$(".main").click(function(e){ }），當點選螞蟻部落的時候能夠實現二級下拉選單隱藏和顯示的切換。

（3）.$(".list").toggle()，下拉選單顯示和隱藏的切換。

（4）.e.stopPropagation()，阻止事件冒泡，否則的話冒泡都document，那麼二級選單始終處於隱藏狀態。

（5）.$(document).click(function(){}），將click時間註冊到document，這樣點選任何其他地方都可以將事件冒泡到document，然後將二級選單隱藏，除非阻止了事件冒泡效果。

（6）.$(".list").hide()，隱藏二級選單。

（7）.$(".list li").click(function(){}），點選二級選單的某一項，能夠將當前文字寫入主體中去，然後再隱藏二級選單。

（8）.$(".main").text($(this).text())，將點選的二級選單的文字寫入主體中去。

（9）.$(".list").hide()，隱藏二級下拉選單。

（10）.$("#noPopEvent").click(function(e){}），為藍色塊註冊事件處理函式，不過阻止了事件冒泡效果，所以二級選單不會隱藏。

相關文章