jQuery hide() 目标<p>元素隐藏整个父div的背景</p>

Question

我有一个简单的博客页面 - 一个包含标题和内容的帖子列表。 当页面加载时，我希望隐藏所有帖子的内容，直到点击它们的标题。 以下代码实现了这一点，但有一个不需要的副作用 - 隐藏每个帖子内容的页面加载 hide() function 也隐藏了包含 (id="content") div 的背景：

相关的 JavaScript ：

$(document).ready(function() {

    $(".blog_post p").hide();

    //BLOG CONTENT ANIMATION
    $('.blog_post').click(function() {
        $(this).find('p').slideToggle(130);
    });      
});

博客页面摘要：

<section class="grid_7">
<div id="content">

    <div class="blog_post">

        <div class="blog_head">
            <h2>Title</h2>
        </div>

        <p>Contents</p>

    </div>

</div>
</section>

相关 CSS ：

section { 
    border: 1px solid white;
}

#content {
    margin: 20px;
    background-image:url('../images/content_background.jpg');
}

当页面加载标题列表时显示没有#content 父 div 的背景。 但是，当我单击帖子的标题时，#content div 的背景会显示在所有帖子的后面，包括该帖子。

知道发生了什么吗？

Answer 1

听起来您有一些适用于 blog_head 元素的 CSS ，这使它们浮动，例如：

.blog_post { float: left; }

在这种情况下，背景不显示的原因是内容 div 的高度为零。 浮动元素不影响其父元素的大小，当内容 div 仅包含标题时，高度变为零。 背景仍然存在，但没有可见的区域。

向内容 div 添加溢出，这将使其包含其子项：

#content { overflow: hidden; }

请注意，只要您不为内容元素指定大小，这不会隐藏任何内容，它只会更改其呈现方式，使其成为其子元素的容器。

Answer 2

在黑暗中有点刺：当然，您的#content div会短很多，因为博客文章不存在，基本上只包含带有标题的div 。 也许这就是问题所在。

图像顶部是否有空白（或微妙）位或其他东西，所以只有当#content div中有更多内容时（例如，当它更高时），它才明显存在？ 或者是否有其他原因可以让您看到当#content真的很短时，您看不到它那部分的背景？ （您可以使用大多数现代浏览器中的调试工具来查看隐藏段落时#content div 的尺寸；或者暂时在其上添加边框，但这些天的工具非常好。）

基本上，由于 jQuery 当然实际上并没有隐藏背景，因此它一定是隐藏段落的副作用——因为对#content div的尺寸有影响。

Answer 3

这对我来说很好用：

HTML：

    <div class="blog_post">

        <div class="blog_head">
            <h2>Title</h2>
        </div>

        <p>Contents</p>

    </div>

</div>

CSS：

section { 
    border: 1px solid white;
}

#content {
    margin: 20px;
    background-image:url('http://bluebackground.com/__oneclick_uploads/2008/04/blue_background_03.jpg');
}

JS

$(document).ready(function() {

    $(".blog_post p").hide();

    //BLOG CONTENT ANIMATION
    $('.blog_post').click(function() {
        $(this).find('p').slideToggle(130);
    });      
});

在这里查看： Jsfiddle 示例