關閉外部點擊菜單。整蠱的例子

我希望此菜單在外部點擊時關閉，並在點擊內部並打開標籤時保持活動狀態。

我已經找到了解決辦法here

它看起來像這樣：

$('html').click(function() { 
    //Hide the menus if visible 
}); 

$('#menucontainer').click(function(event){ 
    event.stopPropagation(); 
});

不過，這並不在我的情況下工作，因爲它應用後，標籤變得無法點擊。

這裏是我的標記：

<button>Open menu</button> 
<div class="menu">Tabbable content here</div>

來源

2013-02-06 jonny pixel

您的標記不包含'html'或任何帶有'menucontainer'的ID –

你需要做以下，使這項工作：

HTML

<button id= "open">Open menu</button> 
<div class="menu">Tabbable content here</div>

jQuery的

$(".menu").hide(); 
$('html').click(function() { 
$(".menu").hide(); 
}); 

$('#open').click(function(event){ 
event.stopPropagation(); 
$(".menu").show(); 
});

JsFIDDLE HERE

來源

2013-02-06 11:54:11

您的小提琴不起作用，因爲點擊菜單也隱藏它。您必須將'stopPropagation'添加到按鈕和菜單點擊。 – Nope

這就是問題所在。當我點擊裏面.menu div它關閉它。 –

檢查在html點擊事件的點擊並沒有從菜單或按鈕內發起並關閉它，如果它沒有，與此類似：

DEMO - 只隱藏如果不是MENY或按鈕以外的任何被點擊

這裏的好處，而不必點擊事件綁定到多個元素與stopPropagation你有一個地方來保持你的邏輯。

此外，任何依靠點擊泡泡通過的功能都會保持不變，因爲您只需檢查聚焦範圍內的點擊來源，這需要區分它。從DEMO

代碼：

$('html').click(function(event) { 
    var $menu = $(".menu"); 
    var $button = $("#open"); 

    if(event.target !== $menu[0] && event.target !== $button[0]){ 
    // add code here to close your menu... 
    $(".menu").hide(); // or similar code 
    } 
}); 

$('#open').click(function(event) { 
    $(".menu").show(); 
});

在大多數情況下，你只有等1次點擊，stopPropagation是偉大的，但你的情況，你需要更多的控制我相信insepcting源可能是一個更好的選擇。

當然，將一個點擊事件與stopPropagation綁定到所有其他元素，反而會合適地工作。

來源

2013-02-06 11:54:55 Nope

由於某些原因，這不起作用。我認爲一些語法錯誤。 –

@jonnypixel：DEMO正在工作;雖然在按鈕變量後面缺少一個';'。我添加了它並再次保存。演示在小提琴中通過了JSHint驗證，並且在Chrome，FireFox和IE9中對我來說工作正常。無法測試IE8爲jsFidde應用程序在IE8中搞砸了，並且看不到這些部分。如果在選擇器中出現錯過匹配，請讓我知道您的確切HTML，然後我可以調整以適應。或者與小提琴玩耍:) – Nope

關閉外部點擊菜單。整蠱的例子

回答

相關問題