javascript - 单击时切换 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>