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

Question

I would like to hide div content when clicking outside of it. I read a lot of topics on the subject but I can't make it work.

Here is the div I want to hide :

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

I'm not an expert in Javascript, so if you have simple sample code to achieve this, it could be great.

I tried the following code but it does not work :

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

Here is the html of the code that opens the DIV content :

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

The button opens the DIV with .menu_main_content class.

So the fact of clicking on the button is considered as outside the DIV. That's my problem.

Thanks in advance for your help

Answer 1

This is probably one for e.stopPropagation :

Demo

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

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

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

  e.stopPropagation();
});

Answer 2

$(this) always refers to document and I think you can't compare elements like that. Try checking if the given element is hovered, if not, hide it:

$(document).click(function() {
    if (!$(".menu_main_content").is(":hover")) {
        $(".menu_main_content").hide();
    }
});