jquery - 单击页面正文时隐藏 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();
});

看看这个小提琴

Answer 2

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

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

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