Question

我对jquery有点新手，我想知道是否有一种简单的方法可以关闭div，只需点击一下即可。

这是我的HTML：

div#divlight {
background: none repeat scroll 0 0 #fff;
border: 2px solid #000000;
height: 600px;
left: 150px;
top: 10p;
padding: 15px;
position: absolute;
width: 800px;
overflow: scroll;
}
<body>
<div id="divlight">
</div>
</body>

这是我的JS

$(function(){
    $('#divlight').hide();
    }); 

    $("#show").click(function()
    {
        $("#divlight").show();
    });

    $("#hide").click(function()
    {
        $("#divlight").hide();
    });
});

Answer 1

当然，您可以收听所有点击，如果目标元素不在#divlight范围内，请将其关闭

$(function(){
    $('#divlight').hide();

    $("#show").click(function() {
        $("#divlight").show();
    });

    $("#hide").click(function() {
        $("#divlight").hide();
    });

    $(document).click(function(e) {
        if ( ! $(e.target).closest("#divlight").length ) {
            $("#divlight").hide();
        }
    });
});

Answer 2

您可以利用.stopPropagation()事件：

$（函数（）{

$('#divlight').hide();

// Stop click events from bubbling up to document
$("#show").click(function(e) {
    e.stopPropagation();
    $("#divlight").show();
});

// Stop click events from bubbling up to document
$("#hide").click(function(e) {
    e.stopPropagation();
    $("#divlight").hide();
});

// Bind click event to document
$(document).click(function(e) {
    $("#divlight").hide();
});

}）;

Answer 3

我通常使用focusout：

$('#divlight').on('focusout', function(){
   $(this).hide()
});

具有不需要创建文档点击事件的优势

当点击外面时，jquery关闭div

3 个答案: