文章彙整

前端開發:使用jQuery實作點擊div以外的地方來關閉它

Astral WebBy Astral Web 3 months agoNo Comments
首頁  /  網站設計與開發  /  前端開發  /  前端開發:使用jQuery實作點擊div以外的地方來關閉它

在使用下拉選單或者是彈出視窗的時候、我們常常會需要一個功能:點擊元件外部來關閉元件。在接下來的範例中,我們要示範如何使用jQuery實現點擊div以外的地方來關閉div。

首先、我們先準備好html的部份,我們要做一個按鈕和一個div方塊。按下按鈕就可以顯示或隱藏div。並且在div顯示的狀態下,點擊div以外的地方就可以隱藏它。

HTML

<button id="btn">Click here to show or hide</button>
 
<div id ="content" style="display:none">Click outside to hide me</div>

JS

// 點擊畫面DIV以外的任何地方就隱藏DIV
$("body").click(function(){
  $("#content").hide();
});
 
// 點擊DIV時、不向上層冒泡。
$("#content").click(function(e){
  e.stopPropagation();
});
 
// 點擊按鈕時顯示或隱藏DIV
$("#btn").click(function(e){
  e.stopPropagation();
  $("#content").toggle();
});

codepen 範例:https://codepen.io/ellen-shih/pen/WNRGePv

 

第二種寫法

JS

// 點擊畫面DIV和按鈕以外的任何地方就隱藏DIV
$("body").click(function(e){  
    var container = $("#content");
    var btn = $("#btn");
    // 判斷點擊的地方不是DIV或按鈕
    if(!container.is(e.target) &&
       !container.has(e.target).length &&
       !btn.is(e.target) &&
       !btn.has(e.target).length
      ){
        container.hide();
    }  
});
 
// 點擊按鈕時顯示或隱藏DIV
$("#btn").click(function(e){
  //e.stopPropagation();
  $("#content").toggle();
});

codepen 範例:https://codepen.io/ellen-shih/pen/xxgEbGv

 

方法大家都學起來了嗎~以上就是本篇的介紹呦!喜歡歐斯瑞文章以及還未追蹤我們粉絲團的讀者們,趕緊到歐斯瑞FB粉絲團IG按下追蹤,也別忘了訂閱電子報,就不會錯過第一手新知分享囉!有問題也歡迎隨時聯繫我們,下次見囉!

 000

推薦文章

Categories:
  前端開發網站設計與開發

留下回應

你的電子郵件地址不會被公開.