单击页面正文时隐藏div

Question

我在点击外面时很难隐藏div;身体。

jQuery(document).ready(function( $ ) {
$('.list_container').hide().before('<div class="listbtn"> </div>');
$('.listbtn').click(function() {
    $('.list_container').animate({width: 'toggle'});
    return false;
 });
 });

我正在寻找隐藏.list_container时单击正文，最好将动画切换为隐藏。

Answer 1

您必须在document上绑定和事件，并阻止容器本身的点击传播。

$(document).on("click", function() {
    $(".list_container").fadeOut();
});

$(document).on("click", ".list_container", function(event) {
   event.stopPropagation();
});

看看这个Fiddle

Answer 2

您需要对隐藏div的文档应用onclick，并向div停止onclick，以阻止事件传播或冒泡到父级：

$(document).click(function () {
    $('.list_container').hide();
});

$('.list_container').click(function (e) {
    e.stopPropagation();
});