jQuery hide () таргетинг <p>элемент скрывает фон всего родительского div - PullRequest
Новая
       1

jQuery hide () таргетинг <p>элемент скрывает фон всего родительского div

1 голос
/ 12 июня 2011

У меня есть простая страница блога - список постов, каждый из которых состоит из заголовка и содержимого. Когда страница загружается, я хочу, чтобы содержимое всех сообщений скрывалось до тех пор, пока не будут нажаты их заголовки. Следующий код выполняет это, но с нежелательным побочным эффектом - функция hide () на странице загрузки, которая скрывает содержимое каждого сообщения, также скрывает фон содержащего (id = "content") div:

Соответствующие скрипты Java : 

$(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 обнаруживается позади всех постов, включая этот.

Есть идеи, что происходит?

Ответы [ 3 ]

3 голосов
/ 12 июня 2011

Похоже, у вас есть некоторые CSS, которые применяются к элементам blog_head, что делает их плавающими, например: 

.blog_post { float: left; }

В этом случае причина, по которой фон не отображается, заключается в том, что высота содержимого div равна нулю. Плавающий элемент не влияет на размер его родителя, и когда div содержимого содержит только заголовки, высота становится равной нулю. Фон все еще там, но нет области, где он виден.

Добавьте переполнение в div содержимого, чтобы оно содержало его дочерние элементы: 

#content { overflow: hidden; }

Обратите внимание, что это ничего не будет скрывать, если вы не укажете размер для элемента содержимого, оно просто изменит способ визуализации, чтобы он стал контейнером для своих дочерних элементов.

0 голосов
/ 12 июня 2011

Для меня это нормально:

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

0 голосов
/ 12 июня 2011

Небольшой удар в темноте: ваши #content div, конечно, будут намного короче, поскольку постов в блоге нет, в основном они состоят только из div с заголовками. Возможно, в этом проблема.

Имеет ли изображение пустой (или тонкий) бит вверху или что-то в этом роде, так что становится очевидным, что оно присутствует, когда в #content div больше контента (например, когда оно выше)? Или есть какая-то другая причина, по которой вы видите, что когда #content действительно короткое, вы не увидите фон, который там есть? (Вы можете использовать инструменты отладки в большинстве современных браузеров, чтобы увидеть, каковы размеры элемента #content, когда абзацы скрыты; или временно наложить на него границу, но инструменты в наши дни довольно хороши.)

По сути, поскольку jQuery, конечно, не скрывает фон, это должно быть побочным эффектом скрытых абзацев & mdash; из-за влияния, которое оказывает на размеры #content div.

...