Хобрук: Ваш путь к мастерству в программировании

jQuery hide(), нацеленный на элемент ‹p›, скрывает фон всего родительского элемента div

У меня есть простая страница блога — список сообщений, каждое из которых состоит из заголовка и содержания. Когда страница загружается, я хочу, чтобы все содержимое сообщений было скрыто до тех пор, пока не будут нажаты их заголовки. Следующий код выполняет это, но с нежелательным побочным эффектом — функция 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 отображается за всеми сообщениями до этого включительно.

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

javascript hide jquery css
12.06.2011

  • Четко сформулированный вопрос. Не видя сразу ничего, кроме приведенного ниже, можете ли вы сделать это изолированно, возможно, в примере на jsbin.com или http :/jsfiddle.net? 12.06.2011
  • Привет, Дэвид. Я не уверен, что ты имеешь в виду. Код jQuery изначально скрывает элементы <p> и переключает отображение/скрытие с скользящей анимацией на них при щелчке по элементам div с классом .blog_post. Если фон #content затронут, либо какой-то другой JavaScript выполняет какое-то действие над ним, либо какой-то CSS по-другому позиционирует фоновое изображение. Я не понимаю, как текущий код может изменить фон для #content. 12.06.2011

Ответы:


1

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

.blog_post { float: left; }

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

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

#content { overflow: hidden; }

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

12.06.2011
  • Да, в основном те строки, о которых я тоже думал. Аккуратный трюк с элементами overflow: hidden и float. 12.06.2011
  • +1 за удивительное объяснение. Могу сказать, что сегодня я узнал еще одну вещь! 12.06.2011
  • Спасибо! Я применил float: left к .blog_post h2, избавившись от этого, все сразу исправилось. 12.06.2011

    • 2

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

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

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

    12.06.2011

    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

    12.06.2011
    Новые материалы
    Управление DOM для чайников вроде меня
    Одной из первых вещей, которую мы рассмотрели, когда начали изучать Javascript во Flatiron, была модель DOM. Кто он? Чем он занимается? Он больше машина, чем человек? Ну да довольно много. ДОМ..
    Что такое структура данных?
    Структура данных хранит и извлекает данные. Все, что обеспечивает эти две функции, является структурой данных . Период. Вы можете пропустить оставшуюся часть статьи, если ответ..
    мои январские чтения по программированию
    Эрик Эллиот Программирование приложения JavaScript Эл Свейгарт «Автоматизируйте скучные вещи с помощью Python» Прогрессивное веб-приложение Google..
    Создание ассоциаций секвелизации с помощью инструмента командной строки Sequelize
    Sequelize - популярный, простой в использовании инструмент объектно-реляционного сопоставления (ORM) JavaScript, который работает с базами данных SQL. Довольно просто начать новый проект с..
    Искусственный интеллект в юридической отрасли - пример прогнозирования судебных решений с помощью глубокого обучения
    На протяжении всей истории люди полагались на суды, присяжных, королей и королев в отправлении правосудия. Сегодня способность судов обеспечивать справедливое и быстрое правосудие для своих..
    Введение в машинное обучение для обнаружения аномалий (часть 1)
    Тщательно созданный, тщательно спроектированный ресурс для специалистов по данным. Часть 1 Главы 03 из Руководства по машинному обучению для обнаружения аномалий Внимание! Прежде чем вы..
    Начало работы с Pulumi в Digital Ocean
    Цифровой океан (ДО) — отличная альтернатива многим другим поставщикам облачных услуг. DO предоставляет простой и понятный пользовательский интерфейс, упрощающий управление инфраструктурой и..