瞄准<p>元素的jQuery hide隐藏整个父div的背景

如何解决瞄准<p>元素的jQuery hide隐藏整个父div的背景

|| 我有一个简单的博客页面-每个帖子都包含标题和内容的列表。页面加载后，我希望所有帖子的内容都隐藏起来，直到单击其标题为止。以下代码完成了此操作，但有一个不良的副作用-隐藏每个帖子内容的on-page-load hide（）函数还隐藏了包含（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的背景会显示在所有帖子（包括该帖子）之前。 知道发生了什么吗？     

解决方法

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

.blog_post { float: left; }

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

#content { overflow: hidden; }

请注意，只要您不为content元素指定大小，它就不会隐藏任何内容，它只会更改其呈现方式，从而使其成为其子容器。     ,        在黑暗中有点刺痛：您的

#content

div

当然会短很多，因为那里没有博客文章，基本上只包含标题的

div

。也许这就是问题所在。 图片的顶部是否有空白（或微妙的地方）或其他内容，以便仅当

#content

div

中有更多内容时（例如，当高）？还是有其他原因导致您看到ѭ5确实很短时，看不到那里的背景呢？ （您可以使用大多数现代浏览器中的调试工具来查看隐藏段落时的ѭ5dimensions div尺寸；或者暂时在其上打一个边框，但是如今这些工具还是不错的。） 基本上，由于jQuery当然实际上并未隐藏背景，因此它一定是被隐藏的段落的副作用-因为会影响

#content

div

的尺寸。     ,        这对我来说很好 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示例