效果基本show當點擊內容

Question

我有這樣的代碼：

$("a.shownav").on("click", function(){ 
    $("div.nav").slideToggle(); 
}); 

當我點擊頁面的其他部分，除了div.nav的一部分，我希望div.nav部分效果基本show。我已經嘗試過，但它似乎沒有工作：

if ($("div.nav").is(":visible")){ 
    $("*").not("div.nav").on("click", function(){ 
     $("div.nav").slideUp(); 
    }); 
} 

我該如何實現我想要的？

Answer 1

您可以處理文檔的單擊事件，獲取目標對象，然後測試它是否是導航div或導航div的子項。如果它不是2中的一個，可以關閉它。

$(document).on("click", function(e){ 
    var targ = $(e.target); 
    if (!targ.hasClass("nav") && targ.parents(".nav").length < 1) { 
     $("div.nav").slideUp(); 
    } 
}); 

DEMO