Jquery：點擊菜單之外的下拉菜單不會消失

Question

我是jquery的新手，我正在尋找google的代碼來創建他們的「更多」按鈕。我已經在atm工作，但讓下拉消失的唯一方法是再次點擊「更多」按鈕。是否有我可以添加的方法來改變這種情況，以便下拉菜單本身之外的任何點擊都會關閉它？感謝您的洞察！

http://jsfiddle.net/rKaPN/1/

Answer 1

綁定一個click事件HTML來捕捉任何點擊製作，並使其隱藏菜單

$("html").click(function() { 
    menu.find('.active').removeClass('active'); 
}); 

然後覆蓋上使用您的菜單的click事件.stopPropagation();

menu.find('ul li > a').bind('click', function (event) { 
    event.stopPropagation(); 

小提琴： http://jsfiddle.net/rKaPN/12/

Answer 2

打開菜單時，創建一個窗口寬度和高度相同的透明覆蓋格。點擊該div，關閉菜單並銷燬div。

Answer 3

可以添加這些了，所以用戶不必點擊

$("body:not(.menu)").hover(function(){ $(".menu").find('.active').removeClass('active');}) 

Answer 4

，而不是測試HTML DOM元素上每一次點擊，你可以綁定一個模糊事件時，你的菜單選項它在激活模糊事件時處於活動狀態，然後將其關閉。更換的這幾行：

//displaying the drop down menu 
    $(this).parent().parent().find('.active').removeClass('active'); 
    $(this).parent().addClass('active'); 

這些：當

//displaying the drop down menu 
    $('.active').removeClass('active'); 
    $(this).parent().addClass('active'); 
    $(this).blur(function() { 
     $('.active').removeClass('active'); 
    });