jQuery click div 外面应该隐藏 div，点击时子 div 不应该隐藏答案

【问题标题】：jQuery click div outside should hide the div, the child divs on click should not hidejQuery click div 外面应该隐藏 div，点击时子 div 不应该隐藏
【发布时间】：2015-01-14 05:31:33
【问题描述】：

我有这样的 HTML 标记

<div class="outside">
    <div class="wrapper">
        <div class="content-wrap">
            <div class="content">
                <div class="content-container">
                    <div class="text">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我希望当鼠标点击内容包装 div 的外部时，内容包装 div 应该被隐藏。在我的标记中，您可以看到我刚刚在 content-wrap 之前使用了两个名为 outside 和 wrapper 的 div。但实际上我在内容包装之前有很多 div。如果单击了 content-wrap 的任何子 div，则不应隐藏该 div。那么有人可以告诉我该怎么做吗？任何帮助和建议都将是非常可观的。这是fiddle link

【问题讨论】：

你尝试过什么吗？
你也可以看看 Ben Almans 的“外部事件”插件：benalman.com/projects/jquery-outside-events-plugin

标签： javascript jquery html css

【解决方案1】：

你可以在.content-wrap的点击事件上调用stopPropagation()来防止动作冒泡：

$('div.content-wrap').click(function(e) {
    e.stopPropagation()
});

$("body").click(function(){
   $(".content-wrap").fadeOut(); 
});

FIDDLE

【讨论】：

【解决方案2】：

为什么不直接选择内容类并将其隐藏？

jQuery(document).ready(function() {
    jQuery('.content').click(function() {
        $( ".content" ).hide( "slow", function() {
            alert( "Animation complete." );
          });
    });
});

【讨论】：

【解决方案3】：

JS 代码：

重复点击功能是因为.parents()过滤器参数只允许一个CSS选择器。

jQuery(document).ready(function() {
    jQuery('div.content-wrap').parents('.outside').click(function(){
        $(this).find('div.content-wrap').hide();
    }).end().parents('.wrapper').click(function(){
        $(this).children('div.content-wrap').hide();
    });        
});

小提琴： http://jsfiddle.net/f2p23vsq/14/

【讨论】：

【解决方案4】：

您可以使用隐藏文本

jQuery(document).ready(function () {
    $("html").click(function () {
        jQuery(".content-wrap").fadeOut();
    });
    $(".content-wrap").click(function () {
        alert("click");
        return false;
    });
});

jsfiddle

【讨论】：