單擊時切換div並在外部單擊時隱藏

Question

我已經有了我的代碼來切換顯示和隱藏div但是每當我嘗試在外部點擊時添加隱藏時，它會與切換代碼沖突，我需要切換div_menu但是在外部點擊時也會隱藏它，就像facebook下拉菜單一樣

$(document).ready(function() {
    $(".toggle_menu").click(function(e) {
        $(".div_menu").toggle();
        e.preventDefault();
    });
});

Answer 1

你可以做點什么

 $(document).ready(function () { $(".toggle_menu").click(function (e) { $(".div_menu").toggle(); e.preventDefault(); }); $(document).click(function(e){ if(!$(e.target).closest('.toggle_menu, .div_menu').length){ $(".div_menu").hide(); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button class="toggle_menu">toggle_menu</button> <div class="div_menu"> <div>some random content menu</div> </div> <div style="height: 100px; background: lightgrey;">some other content goes here</div> 

Answer 2

使用e.target查找當前目標元素，並使用is（）針對選擇器檢查當前匹配的元素集

$(document).ready(function () {
    $(document).click(function (e) {
        if ($(e.target).closest(".toggle_menu,.div_menu").length) {
            $(".div_menu").toggle();
            e.preventDefault();
        } else {
            $(".div_menu").hide();
        }

    });
});

DEMO

Answer 3

$("body").click
(
   function(e){
      if ($(e.target).is($(".toggle_menu"))) {
        $(".div_menu").toggle();
      }else{
        $(".div_menu").hide();
      }
   }
);

Answer 4

$(document).ready(function() {
    $(".toggle_menu").click(function(e) {
        $(".div_menu").toggle();
        e.preventDefault();
    });
    $(document).click(function(e) {
        $(".div_menu").hide();
    });
});

Answer 5

嘗試這個

$(document).click(function(e){
    if($(e.target).parents('.div_menu').length == 0 && $(e.target).attr('class') != "div_menu"){
        $(".div_menu").toggle();
    }
});