當其他地方點擊時，菜單應該消失

我有一個div，只要點擊一個按鈕，它應該是可見的。這就像一個菜單。之後，它應該消失（切換），再次單擊按鈕或當用戶單擊頁面上的其他位置（全身）時。當其他地方點擊時，菜單應該消失

在我目前的做法，菜單不斷切換，所以這兩個功能（見下文）正在觸發。

$("#b1").click(function() { 
    $("#menu").toggle("slide"); 
}); 

$("body").click(function() { 
    if ($("#menu").is(":visible")) { 
    $("#menu").toggle("slide"); 
    } 
});

我應該如何提高我的代碼，從而使菜單隻有當按鈕被再次點擊或者用戶點擊別的地方的時候消失？

Here is a fiddle。

來源

2016-07-25 user1170330

我知道這不是直接關係到你所問的，而是使用'toggle'我會使用'slideToggle'。 – Dev1997

使用$(window)附加的事件，那麼你就可以在任何地方關閉菜單。

$("#b1").click(function() { 
    $("#menu").toggle("slide"); 
    return false; 
}); 

$(window).click(function() { 
    if ($("#menu").is(":visible")) { 
    $("#menu").toggle("slide"); 
    } 
});

檢查演示：https://jsfiddle.net/wru8mvxt/5/

來源

2016-07-25 11:30:13

這是更簡單和明確的答案:) –

使用這樣的事情：

$(document).mouseup(function (e) 
{ 
    var container = $("YOUR CONTAINER SELECTOR"); 

    if (!container.is(e.target) // if the target of the click isn't the container... 
     && container.has(e.target).length === 0) // ... nor a descendant of the container 
    { 
     container.hide(); 
    } 
});

來源

2016-07-25 11:22:48

您可以使用e.target和檢查時，它不是在菜單或得到點擊的按鈕。否則，即使點擊按鈕或單擊內部，菜單也會關閉。

$("#b1").click(function() { 
    $("#menu").slideDown(); 
}); 

$("body").click(function(e) { 
    if (!$(e.target).is("#b1") && $("#menu").is(":visible")) { 
     $("#menu").slideUp(); 
    } else { 
     e.preventDefault(); 
    } 
});

如果你想在菜單上點擊呆在裏面甚至，只需添加&& !$(e.target).is("#menu")到if條件。

Working example.

來源

2016-07-25 11:23:19 eisbehr

我檢查了演示，它不能正常工作，有時在再次單擊時它不會關閉。 –

'e.preventDefault（）'阻止錨標記的默認操作。請參閱[鏈接]（https://jsfiddle.net/wru8mvxt/12/），超鏈接將不再工作。 – user1170330

我覺得你的代碼看起來不錯。我看到一個問題，當你點擊菜單它會隱藏。

$("#b1").click(function() { 
    $("#menu").toggle("slide"); 
    return false; // prevent to pass click event to body 
}); 

$("body").click(function() { 
    if ($("#menu").is(":visible")) { 
    $("#menu").toggle("slide"); 
    } 
}); 

$("#menu").click(function(e){ 
    e.preventDefault(); 
    return false; 
});

來源

2016-07-25 11:24:11

我已經編輯了我的答案，以防止通過點擊事件身體點擊按鈕 –

檢查我已經更新你jsfiddle代碼..謝謝https://jsfiddle.net/wru8mvxt/8/ –

試試這個。

$("#b1").click(function() { 
event.stopPropagation(); 
    $("#menu").toggle("slide"); 
}); 

$("body").click(function() { 
if(!$(event.target).closest('#menu').length){ 
if ($("#menu").is(":visible")) { 
    $("#menu").toggle("slide"); 
    } 
} 

});

來源

2016-07-25 11:38:03

我認爲這段代碼將解決您的問題。您可以使用e.target屬性來查找用戶是否單擊了按鈕或外部按鈕。當用戶點擊按鈕b1它進入b1點擊事件和身體點擊事件。所以如果爲了找到用戶點擊的位置，您可以使用event.target屬性。

單擊該按鈕將切換菜單的可見性。

如果打開，單擊按鈕外部將關閉菜單。

$("#b1").click(function() { 
    $("#menu").toggle("slide"); 
    $("#b1").text() == "hide menu" ? $("#b1").text("show menu") : $("#b1").text("hide menu"); 
}); 

$("body").click(function(e) { 
    if (!$(e.target).is("#b1") && $("#menu").is(":visible")) { 
    $("#menu").slideUp(); 
    } 
    else { 
    e.preventDefault(); 
    } 
});

Working fiddle

來源

2016-07-25 11:42:17

'e.preventDefault（）'防止錨標記的默認操作。看到[鏈接]（https://jsfiddle.net/wru8mvxt/11/），超鏈接將不再工作。 – user1170330

@ user1170330是的你是對的。但是你可以刪除e.preventdefault（）;那麼代碼也可以工作。將href更改爲href =「https://jsfiddle.net/」。工作小提琴：https：//jsfiddle.net/aruncm/wru8mvxt/14/ –

你必須做以下更改。

$(document).ready(function() { 
    $("#b1").click(function(e) { 
     $("#menu").slideToggle(); 
     e.stopPropagation(); 
    }); 
    $(document).click(function(e) { 
     if (!$(e.target).is('#menu, #menu *')) { 
      $("#menu").slideUp(); 
     } 
    }); 
});

來源

2016-07-25 12:53:24

當其他地方點擊時，菜單應該消失

回答

相關問題