javascript - 单击时切换div，在外部单击时隐藏

我已经有了切换显示和隐藏div的代码，但是每当我尝试在外部单击时添加“隐藏”时，它就会与切换代码冲突，我需要切换div_menu，但在外部单击时也要隐藏它，就像facebook下拉菜单一样

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

最佳答案

你可以做类似的事情

$(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>

关于javascript - 单击时切换div，在外部单击时隐藏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27371301/