如何使用 jquery 實現點擊按鈕後可以打開視窗再次點擊可以關閉的效果

jquery javascript html

COCO 2022-07-11 23:33:27 ‧ 1370 瀏覽

分享至

我是一名學前端的菜鳥，我用 jquery 實做一個需求，可以在點擊按鈕後打開視窗！
如果點擊視窗內的物件，不可以關閉視窗，但點視窗外就可以～

但是我發現如果想要再次點擊按鈕來關閉視窗，目前這個寫法似乎無法實現，也不知道該怎麼改才可以實現這個需求，希望可以獲得大家的幫助。

我的程式範例

froce iT邦大師 1 級 ‧ 2022-07-12 08:29:15 檢舉

1. 通常你要的這個叫modal。
2. 通常modal除了中間顯示訊息的部分，外層會有一圈全屏的元素擋住下面的元素。
3. 點擊外部關閉的功能就會綁在外圈全屏的元素，不會汙染到其他元素。
4. 不要亂綁事件到document，去搞懂事件傳遞機制。
https://shubo.io/event-bubbling-event-capturing-event-delegation/

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

asd3733653

iT邦新手 2 級 ‧ 2022-07-12 08:49:12

問題很多。。。我慢慢說
1.$('.tool').on('click',function(e){
下方又再綁一個
$(document).on('click',function(e){
會導致每次click綁一個監聽事件
你可以在下方下個Log就知道
2.點擊class清單內的把某個css設置成inline-block
而tool這個class也在清單內，就邏輯來說，確實是矛盾的(因為你想要點擊第二次隱藏
所以語法需要修正
3.解法

const className = ['delet_wrap','txt','btn_group','consider','confirm','tool'];

$(document).on('click',function(e){
    if(className.includes(e.target.className)){
      
      $('.delet_wrap').toggle(0,'display');
    }else{
      $('.delet_wrap').css('display','none');
    }
})