Question

我有一个简单的博客页面 - 一个帖子列表，每个帖子都包含标题和内容。当页面加载时，我希望隐藏所有帖子的内容，直到他们的标题被点击为止。下面的代码实现了这个但是带来了不必要的副作用 - 隐藏每个帖子内容的页面加载hide（）函数也隐藏了包含（id =“content”）div的背景：

相关JavaScripts ：

$(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 parent div的背景。但是，当我点击帖子的标题时，＃content div的背景会显示在所有帖子的后面，包括那个帖子。

知道发生了什么事吗？

Answer 1

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

.blog_post { float: left; }

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

向内容div添加一个溢出，使其包含子代：

#content { overflow: hidden; }

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

Answer 2

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

图像顶部是否有空白（或微妙）位或某些内容，因此当div #content中有更多内容时（例如，当它更高时），它就显而易见了）？或者还有其他一些原因你可以看到当div真的很短时，你会看不到那里的背景吗？（您可以在大多数现代浏览器中使用调试工具查看隐藏段落时#content div的维度;或暂时在其上打一个边框，但这些天的工具非常好。）

基本上，由于jQuery实际上并不隐藏背景，因此它必须是隐藏段落的副作用 - 因为它对#content {维度的影响{1}}。

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 example

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

3 个答案: