jquery - ページ本体をクリックするとdivを非表示

Question

divの外側をクリックすると、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();
});