jQuery 排除指定區塊以外的任意點擊觸發事件-教學撰寫:徐嘉裕Neil hsu

今天要說的這個功能其實就跟FB粉絲團管理後台的左右收合選單是一樣的原理，也就是當選單開啟時，在選單以外的任何地方發生點擊事件觸發選單收合，但於選單內發生的點擊不產生作用，除非點選關閉按鈕，像下圖這樣

這裡分享一個好用的jQuery  function，原生的code是這樣

$(document).mouseup(function (e) {
var container =$("#leftmenu"); // 這邊放你想要排除的區塊
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});

當點擊發生在#leftmenu以外的地方就會關閉區塊，但會有一個問題，如果使用css動畫效果時(滑動/移動)，不管是開啟還是關閉任意點擊，動畫一樣會被觸發，這樣效果上就會有問題了，所以做了以下調整!

$(this).mouseup(function(e) {
if ($("#leftmenu").css("left") == '0px') {  //以開啟時的left的位置做判斷
var container = $("#leftmenu"); // 這邊放你想要排除的區塊
if (!container.is(e.target) && container.has(e.target).length === 0) {
$("#leftmenu").css({
"animation-name": "leftclose",
"left": "-350px"  //關閉時的left的位置
});
}
}
});

紅字部分增加了以css樣式的狀態為判斷依據，這裡用0px表示選單是開啟狀態，點擊任意區塊可以出觸發code關閉選單，反之選單為收合狀態時left為-350px，點擊任意區塊則無作用(因為不是0px)，這樣就不會產生選單已經收合然後點擊任意區塊又收合一次的情況了，以上工作心得分享，有需要的朋友參考看看!

參考資料來源：https://sweeteason.pixnet.net/blog/post/43734349-jquery-%E9%A0%81%E9%9D%A2%E4%B8%AD%E9%BB%9E%E6%93%8A%E5%8D%80%E5%A1%8A%E4%B9%8B%E5%A4%96%E7%9A%84%E5%85%B6%E4%BB%96%E5%9C%B0%E6%96%B9%EF%BC%8C%E9%83%BD%E9%9A%B1

工作心得撰寫：徐嘉裕 Neil hsu