javascript - 使用 jQuery 在区域外单击时隐藏 div

Question

我想在点击外部时隐藏 div 内容。我读了很多关于这个主题的主题，但我无法让它发挥作用。

这是我想要隐藏的div:

<div class="menu_content">
    <div class="container-fluid">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <h1>Title</h1>
                </div>
                <div class="col-lg-4">
                    <h1>Title</h1>
                </div>      
                <div class="col-lg-4">
                    <h1>Title</h1>
                </div>
            </div>  <!-- END ROW-->
        </div>
    </div><!-- END CONTAINER FLUID-->
</div>

我不是 Javascript 专家，所以如果您有简单的示例代码来实现这一点，那就太好了。

我尝试了以下代码，但它不起作用:

$(document).click(function() {
    if($(this) != $(".menu_main_content")) {
        $(".menu_main_content").hide();
    }
});

这是打开 DIV 内容的代码的 html :

 <div class="menu_main_button">
        <img href=""src="{{ asset('images/icons/icon_menu_home.png') }}"  alt="" />
</div>

该按钮打开具有 .menu_main_content 类的 DIV。

因此，单击按钮的事实被视为在 DIV 之外。这是我的问题。

预先感谢您的帮助

Answer 1

这可能是 e.stopPropagation 的一个:

Demo

$(document).click(function(e) {

  $('.menu_content').hide();
});

$('.menu_content').click(function(e) {

  e.stopPropagation();
});