Можно ли создать показывать / скрывать на дисплее встроенный блок, не затрагивая соседние элементы? - PullRequest
Новая
       0

Можно ли создать показывать / скрывать на дисплее встроенный блок, не затрагивая соседние элементы?

0 голосов
/ 12 января 2012

Я создал демонстрацию проблемы, с которой столкнулся: http://jsbin.com/omomit/2

При нажатии на ссылку показать / скрыть появляется скрытый текст. Поведение, которое я хотел бы исправить, заключается в том, как он выталкивает и первую, и вторую строки контента, а не только родительский контейнер, в котором он существует.

Другими словами, если вы пометите каждый элемент списка, он будет выглядеть так:

A B (<--- Это искусственная строка, поскольку она не запрограммирована как строка) <br /> C D

Когда я нажимаю на переключатель для A, он выглядит следующим образом (H для скрытого содержимого):

A B
В _
C D

D был сброшен, и этого не должно происходить. Вместо этого я хочу, чтобы это было просто так:

A B
В Д
C

Я знаю, что могу исправить это, используя float, но причина, по которой я не хочу использовать float, заключается в том, что эти столбцы должны эмулировать таблицу, чтобы независимо от высоты каждого модуля faux-column они выстраивались искусственный ряд. Очень важно, чтобы каждый ряд faux выравнивался друг с другом сверху вниз, поэтому я также использую вертикальное выравнивание set top.

Можно ли использовать эту функцию сценария переключения так, чтобы она влияла только на родительский контейнер, в котором он используется?

1 Ответ

0 голосов
/ 12 января 2012

Я не на 100% уверен в том, что вы просите, но если у вас есть содержимое показать / скрыть внутри абсолютно позиционированного элемента, это не повлияет на макет.

Попробуйтедобавив эти свойства CSS в ваш селектор .hiddentoggle: 

.hiddentoggle {
  display:none; // you already had this there
  background: lightBlue;
  left: 0;
  padding: 0 10px 10px;
  position: absolute;
  top: 100%;
  z-index: 1;
}

ОБНОВЛЕНИЕ:

Исходя из вашей новой информации, мне любопытно, почему вы не хотитеиспользовать поплавки.Мне также любопытно, что вы подразумеваете под «искусственной строкой».

В любом случае, если вы хотите, чтобы при показе содержимого А только поле C сдвигалось вниз, единственный способ добиться этого - обернутьА и С в элементе.Этот элемент не должен быть плавающим, это также будет display:inline-block, но как бы вы ни решили его разложить, вам понадобится создать своего рода «столбец», чтобы получить эффект, который выищу.

...