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();
});

Answer 2

$(this)始终引用document而我认为您无法比较这样的元素。尝试检查给定元素是否悬停，如果没有，请隐藏它：

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

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

2 个答案: