JQuery, переключая DIV, CSS интервал выпуска

У меня есть эта разметка:JQuery, переключая DIV, CSS интервал выпуска

<div class="myToggledDiv"> 
    <div>content</div> 
</div> 

<div style="margin-top: 10px;"> 
    content 
</div>

Via JQuery, я делаю .slideToggle, чтобы показать/скрыть верхнюю DIV.

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

Поведение, однако, состоит в том, что по мере того, как верхний div скользит вниз, маркер 10px остается, но как только верхний div заканчивается сползанием, маржа 10px исчезает. Возможно, это проблема с крахом.

Решение, которое я придумал это:

<div class="myToggledDiv"> 
    <div>content</div> 
</div> 

<div style="font-size: 1px">&nbsp;</div> 

<div style="margin-top: 10px;"> 
    content 
</div>

& NBSP; является ключевым, поскольку в div должен быть контент, чтобы «разделить» два и сохранить 10px маржи.

Я попробовал .clearfix: после подхода, но это не работает в этом сценарии, поэтому, возможно, это проблема с jQuery. Кто-нибудь столкнулся с этим и нашел более элегантное решение, чем дополнительный div?

источник

2010-02-17 DA.

Верьте или нет, вам просто нужно добавить прокладку 1px в начало родительского контейнера. Проблема заключается в том, что в конце slideToggle первый div установлен в display:none, что приводит к тому, что второй div будет удалять dab против родителя. Теперь это просто ошибка CSS. Если на родительском элементе нет padding, маржа дочерних элементов будет идти за пределами родителя, и нажмите оба элемента вниз. Применяя 1px запас для родительского элемента, вы заставляете margin оставаться внутри элемента:

<body style="padding-top: 1px"> 
    <div class="myToggledDiv"> 
     <div>content</div> 
    </div> 

    <div style="margin-top: 10px;"> 
     content 
    </div> 
</body>

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

Если вам нужно, чтобы компенсировать дополнительные прокладки (в зависимости от расположения), вы можете просто быть в состоянии использовать это:

{ margin-top: -1px; padding-top: 1px }

источник

2010-02-17 20:13:29

+1 Хорошая информация, как всегда, Дуг! – Sampson

Несколько нечетных обходной, но вы можете установить следующие правила для второй DIV:

{ position:relative; top:10px; }

Интернет демо: http://jsbin.com/enala/edit

Я также хотел бы призвать Вас рассмотреть Doug's Answer. Если установка отступов в родительском контейнере приводит к нежелательным результатам, вы можете отказаться от этого решения в качестве альтернативы.

источник

2010-02-17 19:50:47 Sampson

Да, это работает хорошо. Мне нравится, как CSS имеет множество способов решения проблем! –

JQuery, переключая DIV, CSS интервал выпуска

ответ

Смежные вопросы