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

Question

I have a simple blog page - a list of posts that each consist of a title and contents. When the page loads I want all posts' contents hidden until their titles are clicked. The following code accomplishes this but with an unwanted side effect - the on-page-load hide() function that hides each post's content also hides the background of the containing (id="content") div:

Relevant JavaScripts :

$(document).ready(function() {

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

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

Summary of blog page :

<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>

Relevant CSS :

section { 
    border: 1px solid white;
}

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

When the page loads the list of titles displays without the #content parent div's background. However when I click on a post's title the #content div's background shows up behind all posts up to and including that one.

Any idea what's going on?

Answer 1

It sound like you have some CSS that applies to the blog_head elements, that makes them float, for example:

.blog_post { float: left; }

In that case, the reason that the background doesn't show up is that the height of the content div is zero. A floating element doesn't affect the size of its parent, and when the content div only contains the headers, the height becomes zero. The background is still there, but there is no area where it's visible.

Add an overflow to the content div, that will make it contain its children:

#content { overflow: hidden; }

Note that this will not hide anything as long as you don't specify a size for the content element, it will just change how it's rendered so that it will become a container for its children.

Answer 2

A bit of a stab in the dark: Your #content div will, of course, be a lot shorter as the blog posts aren't there, basically consisting just of the div s with the titles. Perhaps that's the problem.

Does the image have a blank (or subtle) bit at the top or something, so that it's only apparent that it's there when there's more content in the #content div (eg, when it's taller)? Or is there some other reason you can see that when #content is really short, you wouldn't see the background on the part of it that's there? (You can use the debugging tools in most modern browsers to see what the dimensions of the #content div are when the paragraphs are hidden; or slap a border on it temporarily, but tools these days are pretty good.)

Basically, since the jQuery doesn't, of course, actually hide the background, it must be a side-effect of the paragraphs being hidden — because of the effect that has on the dimensions of the #content div .

Answer 3

This is working fine for me:

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);
    });      
});

Check it live here: Jsfiddle example