我試圖讓我的漢堡菜單檢測菜單(.NavMenu)之外時,單擊並改變漢堡包複選框回不選擇。股利切換的複選框,但檢測時點擊的div以外關閉同時
我使用event.stopPropagation();
並試圖檢測文檔中點擊試過,但我的JavaScript知識實在有限,所以我要麼不能夠在所有顯示.NavMenu或點擊之外時,但.NavMenu關閉漢堡停留菜單就好像它是開放的(X)。
誰能幫我怎麼去當DIV,也將觸發複選框之外點擊菜單關閉?
我試圖讓我的漢堡菜單檢測菜單(.NavMenu)之外時,單擊並改變漢堡包複選框回不選擇。股利切換的複選框,但檢測時點擊的div以外關閉同時
我使用event.stopPropagation();
並試圖檢測文檔中點擊試過,但我的JavaScript知識實在有限,所以我要麼不能夠在所有顯示.NavMenu或點擊之外時,但.NavMenu關閉漢堡停留菜單就好像它是開放的(X)。
誰能幫我怎麼去當DIV,也將觸發複選框之外點擊菜單關閉?
在格加入ID 'burgerMenu' 帶class = 'NavMenu'。
和修改您的JavaScript作爲
$('#burger').click(function() {
if($(this).is(':checked')) {
$(".NavMenu").show();
} else {
$(".NavMenu").hide();
}
});
$('body').click(function(event){
removeBurger(event)
})
//this detects that user has clicked outside the menu
function removeBurger(e){
var targ;
if (!e) {
var e = window.event;
}
if (e.target) {
targ=e.target;
} else if (e.srcElement) {
targ=e.srcElement;
}
if(targ.id!="burgerMenu" && targ.id!="burger"){
if ($('#burger').is(':checked')) {
$(".NavMenu").hide();
$("#burger").prop("checked", false);
}
}
}
希望這會有所幫助。
您可以通過給一些ID或類將牽着你的頁面內容主要DIV實現這一目標,然後在腳本中,可以檢測是否點擊了該分區或內部沒有被執行:
考慮您的主要div有類mainDiv您可以在下面片段添加到您的腳本來實現你問什麼:
$(".mainDiv").click(function(){
if($('#burger').is(':checked'))
$('#burger').click();
});
這很有趣,是否有可能$(**!**「。NavMenu」)。click(function()如果點擊不在NavMenu然後關閉? – Beth
我認爲上面的代碼也在做同樣的事情@Beth,我們只能檢測其中用戶點擊我不知道的檢測符合用戶沒有點擊任何方式。 –
在嘗試此你的提琴:
$('#burger').click(function(event) {
event.stopPropagation();
if($(this).is(':checked')) {
$(".NavMenu").show();
} else {
$(".NavMenu").hide();
}
});
$('body').click(function() {
if ($('#burger').is(':checked')) {
$(".NavMenu").hide();
$("#burger").prop("checked", false);
}
})
$('.NavMenu').click(function(event) {
event.stopPropagation();
})
感謝X! rger菜單對我開放,點擊時不關閉它? 。 – Beth
我相信這是沒有被發現'其他{ $( 「NavMenu」)隱藏(); }' – Beth
檢查這個http://jsfiddle.net/s9ndequ2/43/。剛剛在body click事件中添加了2個條件。它正在工作。 –