jQuery關屏幕導航

Question

我想寫一個簡單的jquery函數來添加類到我的HTML爲屏幕nav過渡。我可以很容易地通過使用.toggleClass來做到這一點，但我想要使用if語句，如果nav單擊正文（除nav之外的任何內容）將會再次隱藏它。我建立了demo codepen。任何人都可以讓我知道我要去哪裏嗎？

Answer 1

$('body !nav') 

不是一個有效的選擇器。你應該做的是給文檔添加一個監聽器：

$(document).click(function() { 
    // Stuff you want to do on a click 
}); 

這將捕獲所有不被另一個函數處理的點擊。然後，捕獲發生在資產淨值的點擊次數：

$("nav").click(function(e) { 
    // Stuff that should happen when nav is clicked. 
    e.stopPropagation(); 
}); 

Answer 2

兩件事情需要解決：

1）在導航點擊使用stopPropagation()（Documentation），以避免註冊體點擊（事件的冒泡默認值）：

$('nav').click(function(e) { 
    e.stopPropagation(); 
}); 

2）使用:not選擇器（Documentation）：

$('body:not(nav)').click(function(e) { 
    if($('nav').hasClass('active')){ 
     $('nav, #wrapper').removeClass('active'); 
    } 
}); 

Updated Code Pen

Answer 3

試試這個：

$('a#menu').click(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    //this should just be .addClass but to demonstrate functionality I've left it as .toggleClass 
    $('nav, #wrapper').toggleClass('active'); 


}); 


//how I want it to work 

//on click of anything besides nav, if the active class is on the nav, take off the active class 
$('body:not(nav)').click(function(e) { 

    if($('nav').hasClass('active')){ 
    $('nav, #wrapper').removeClass('active'); 
    } 

});