先登入，右上角點漢堡排後
隨意點擊任何一處，都可以將 div 移除
用谷歌檢查確實沒有一個 div 去觸發這個移除事件
但我現在的做法是
當點擊後出現 div ，背景會有一個透明的 div
當滑鼠移動到這個透明 div （或是點擊這個 div）
就會把漢堡排出來的 div 跟 透明 div 本身一起移除
我好奇要怎麼做到像不需要另外開 div 事件就可以移除
https://ithelp.ithome.com.tw/ ＩＴ幫也是跟 stackoverflow 一樣的做法
我有想過這樣做
$('body').on('click', function () {
});
但這樣點到主要的 div 也會消失
很明顯不是這麼做
補充
我知道 show() 跟 hide()
我是指他是用什麼樣的「觸發事件」讓 div 消失
因為很明顯是隨便點網站任一處，就可以把 div 消失
但是用何種方式呢？我的作法是會帶透明 div ，點到 div 這個就觸發事件移除
已邀請的邦友 {{ invite_list.length }}/5
沒有很難，也不需要開 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
}
});
一種做法
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();
})
google javascript tab
1.重頭寫
w3schools javascript教學
2.套模板
Bootstrap教學
自刻方式如下
1.我不會用click事件會用的是mousedown。並宣告在body上。
2.當點開時，並做開啟記錄。
3.焦點判斷，如果在元件焦點範圍內，移除動作不啟用。離開元件焦點則啟用移除作用
4.針對第1項寫的mousedown，去判斷目前是否已開啟，且也啟用移除作用就可以了。
不過，其實用一下Bootstrap，的選單就可以達到你要的東西了。真的想自行研究的話，我上面的東西思考一下。因該會對你有幫助才對。雖然我現在很少自刻自已的選單了。
ps:現在我不太會給你程式碼了，是因為我認為你該離開菜鳥的階段了。學會如何從提示內找到你要的東西。或是不一定要照著人家說的去開創新的寫法了。
不會只會照抄而不是了解內部的動作及創新自已的東西。
不太懂你說這一句
用谷歌檢查確實沒有一個 div 去觸發這個移除事件
其中的div是指什麼，一般來說我們偵測主要會用id或class
這個站該功能是用jQuery寫的，也就是在 https://cdn.sstatic.net/Js/full-anon.en.js?v=87d0e44a5e0c 裡面，mousedown做觸發偵測，$(".topbar-icon-on").is(":visible")判斷開關，再進一步處理
CodePen
iThome鐵人賽
看影片追技術