iT邦幫忙

0

jquery 開啟一個 div 後要將它隱藏,是否有更好的做法?

範例
https://stackoverflow.com/

先登入,右上角點漢堡排後
隨意點擊任何一處,都可以將 div 移除
用谷歌檢查確實沒有一個 div 去觸發這個移除事件
但我現在的做法是
當點擊後出現 div ,背景會有一個透明的 div
當滑鼠移動到這個透明 div (或是點擊這個 div)
就會把漢堡排出來的 div 跟 透明 div 本身一起移除
我好奇要怎麼做到像不需要另外開 div 事件就可以移除

https://ithelp.ithome.com.tw/ IT幫也是跟 stackoverflow 一樣的做法
我有想過這樣做

$('body').on('click', function () {
});

但這樣點到主要的 div 也會消失
很明顯不是這麼做

補充
我知道 show() 跟 hide()
我是指他是用什麼樣的「觸發事件」讓 div 消失
因為很明顯是隨便點網站任一處,就可以把 div 消失
但是用何種方式呢?我的作法是會帶透明 div ,點到 div 這個就觸發事件移除

可以參考看看
https://codepen.io/myxgpxat/pen/pMbVOG
hide()
show()
Kuro Hsu iT邦新手 4 級 ‧ 2019-07-26 12:32:58 檢舉
留言區沒辦法貼 md 我回在下面
3
Kuro Hsu
iT邦新手 4 級 ‧ 2019-07-26 12:34:00
最佳解答

沒有很難,也不需要開 div。

用 jQuery 的作法大概像這樣

<nav class="menu">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</nav>
$('.menu').on('click', function(e) {
  // show menu
})

$('body').on('click', function(e) {
  e.stopPropagation();
  
  // 點擊目標如果不是 nav.menu 與其底下元素則隱藏
  if( !$(e.target).is('nav.menu, nav.menu *') ) {
    // hide menu
  }
});
0
dragonH
iT邦大師 3 級 ‧ 2019-07-26 13:34:33

一種做法

codepen

html

<button id = "btn">click</button>
<div class = "modal" id = "myModal"></div>

code

$('#btn').click(() => {
  $('#myModal').show();
});
$('body').click((e) => {
  if (['myModal', 'btn'].indexOf(e.target.id) > -1) {
    return false;
  }
  $('#myModal').hide();
})
0
sion
iT邦新手 5 級 ‧ 2019-07-26 13:59:41

google javascript tab
1.重頭寫
w3schools javascript教學
2.套模板
Bootstrap教學

1
浩瀚星空
iT邦大師 1 級 ‧ 2019-07-26 14:16:39

自刻方式如下

1.我不會用click事件會用的是mousedown。並宣告在body上。
2.當點開時,並做開啟記錄。
3.焦點判斷,如果在元件焦點範圍內,移除動作不啟用。離開元件焦點則啟用移除作用
4.針對第1項寫的mousedown,去判斷目前是否已開啟,且也啟用移除作用就可以了。

不過,其實用一下Bootstrap,的選單就可以達到你要的東西了。真的想自行研究的話,我上面的東西思考一下。因該會對你有幫助才對。雖然我現在很少自刻自已的選單了。

ps:現在我不太會給你程式碼了,是因為我認為你該離開菜鳥的階段了。學會如何從提示內找到你要的東西。或是不一定要照著人家說的去開創新的寫法了。
不會只會照抄而不是了解內部的動作及創新自已的東西。

0
ashuidg
iT邦新手 5 級 ‧ 2019-07-26 15:37:46

不太懂你說這一句

用谷歌檢查確實沒有一個 div 去觸發這個移除事件

其中的div是指什麼,一般來說我們偵測主要會用id或class
這個站該功能是用jQuery寫的,也就是在 https://cdn.sstatic.net/Js/full-anon.en.js?v=87d0e44a5e0c 裡面,mousedown做觸發偵測,$(".topbar-icon-on").is(":visible")判斷開關,再進一步處理
CodePen

我要發表回答

立即登入回答