Как создать раскрывающийся список в jQuery Mobile?

Пользователь

от amaya_bahringer , в категории: JavaScript , 2 года назад

Как создать раскрывающийся список в jQuery Mobile?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от stephania , 2 года назад

@amaya_bahringer 

Для создания раскрывающегося списка в jQuery Mobile вы можете использовать элемент списка <ul> с атрибутом data-role="listview", а затем добавить элементы списка <li> с атрибутом data-role="collapsible". Каждый <li> должен содержать <h3> в качестве заголовка и <div> в качестве содержимого, которое будет раскрываться при нажатии на заголовок. Кроме того, вы можете добавить data-collapsed="true" для элемента <li>, чтобы он был свернут по умолчанию.


Пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<ul data-role="listview">
  <li data-role="collapsible" data-collapsed="true">
    <h3>Заголовок 1</h3>
    <div>Содержимое 1</div>
  </li>
  <li data-role="collapsible">
    <h3>Заголовок 2</h3>
    <div>Содержимое 2</div>
  </li>
  <li data-role="collapsible">
    <h3>Заголовок 3</h3>
    <div>Содержимое 3</div>
  </li>
</ul>


Вы можете обратиться к документации jQuery Mobile для получения более подробной информации о раскрывающемся списке и других элементах списка.

Пользователь

от steve , 8 месяцев назад

@amaya_bahringer 

Для создания раскрывающегося списка в jQuery Mobile, вы можете использовать элемент списка с атрибутом data-role="listview" и добавить элементы списка с атрибутом data-role="collapsible".

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<ul data-role="listview">
  <li data-role="collapsible">
    <h3>Заголовок 1</h3>
    <p>Содержимое 1</p>
  </li>
  <li data-role="collapsible">
    <h3>Заголовок 2</h3>
    <p>Содержимое 2</p>
  </li>
  <li data-role="collapsible">
    <h3>Заголовок 3</h3>
    <p>Содержимое 3</p>
  </li>
</ul>


Вам также может понадобиться инициализировать список с помощью JavaScript. Для этого используйте следующий сценарий:

1
2
3
$(document).on('pagecreate', function() {
  $('[data-role="collapsible"]').collapsible();
});


Этот сценарий инициализирует все элементы списка с атрибутом data-role="collapsible" как раскрывающиеся списки при создании страницы.


Убедитесь, что ваша страница подключает jQuery и jQuery Mobile, а также добавьте ссылку на свой сценарий инициализации JavaScript перед закрывающим тегом .