jQuery, переключение div, CSS-интервал - PullRequest
Новая
       8

jQuery, переключение div, CSS-интервал

2 голосов
/ 17 февраля 2010

У меня есть эта разметка: 

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

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

Через jQuery я делаю .slideToggle, чтобы показать / скрыть верхний элемент div.

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

Однако поведение заключается в том, что, когда верхний блок скользит вниз, поле в 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?

Ответы [ 2 ]

4 голосов
/ 17 февраля 2010

Верьте или нет, вам просто нужно добавить заполнение 1px в верхней части родительского контейнера. Проблема заключается в том, что в конце slideToggle первый div устанавливается на display:none, что приводит к тому, что второй div получает сильный удар по родительскому элементу. Теперь это просто ошибка 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 }
3 голосов
/ 17 февраля 2010

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

{ position:relative; top:10px; }

Онлайн демо: http://jsbin.com/enala/edit

Я бы также рекомендовал вам рассмотреть Ответ Дуга . Если установка отступа в родительский контейнер приводит к нежелательным результатам, вы можете использовать это решение в качестве альтернативы.

...