Складывающиеся элементы jQuery Mobile

Складывающиеся блоки содержимого

Складывающиеся (Collapsibles) позволяют скрывать или показывать содержимое - это полезно для хранения части информации.

Чтобы создать блок, который можно складывать, присвойте контейнеру attribute data-role="collapsible". В контейнере (div) добавьте элемент заголовка (h1-h6), за которым следует любое HTML-маркеры, которые вы хотите расширить:

Пример

<div data-role="collapsible">
  <h1>Нажмите на меня - я могу складываться!</h1>
  <p>Я содержимое, которое можно складывать.</p>
</div>

попробуйте лично

По умолчанию содержимое закрыто. Если вы хотите расширить содержимое при загрузке страницы, используйте data-collapsed="false":

Пример

<div data-role="collapsible" data-collapsed="false">
  <h1>Нажмите на меня - я могу складываться!</h1>
  <p>Теперь я по умолчанию открыт.</p>
</div>

попробуйте лично

Вложенные блоки, которые можно складывать

Можно вложить блоки содержимого, которые можно складывать:

Пример

<div data-role="collapsible">
  <h1>Нажмите на меня - я могу складываться!</h1>
  <p>Я содержимое, которое открывается.</p>
  <div data-role="collapsible">
    <h1>Нажмите на меня - я вложенный блок, который можно складывать!</h1>
    <p>Я содержимое, которое открывается в вложенном блоке, который можно складывать.</p>
  </div>
</div>

попробуйте лично

Совет:Блоки содержимого, которые можно складывать, могут быть вложены столько раз, сколько вы хотите.

Складывающиеся наборы

Складывающиеся наборы (Collapsible sets) представляют собой комбинированные блоки, которые можно складывать (часто называемые аккордеонами). При открытии нового блока все другие блоки закрываются.

Создайте несколько блоков содержимого, а затем 包装 этот блок, который можно складывать, новым контейнером с помощью data-role="collapsible-set":

Пример

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Нажмите на меня - я могу складываться!</h1>
    <p>Я содержимое, которое открывается.</p>
  </div>
  <div data-role="collapsible">
    <h1>Нажмите на меня - я могу складываться!</h1>
    <p>Я содержимое, которое открывается.</p>
  </div>
</div>

попробуйте лично

Более сложные примеры

Удалите закругленные углы с помощью атрибута data-inset
Как удалить закругленные углы у collapsibles.
Минимизируйте collapsibles с помощью data-mini
Как сделать collapsibles более компактными.
Измените иконки с помощью data-collapsed-icon и data-expanded-icon
Как изменить иконки collapsibles (по умолчанию это + и -).