今天要說的這個功能其實就跟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