Как сгруппировать <li> в спойлер на js или jquery?

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

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

Как сгруппировать <li> в спойлер на js или jquery?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от cooper.berge , год назад

@vladimir 

Следующий пример демонстрирует, как сгруппировать несколько элементов в спойлер с помощью JavaScript и jQuery:


HTML:

1
2
3
4
5
6
7
<button id="toggleBtn">Нажми меня</button>
<ul id="items">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
</ul>


CSS:

1
2
3
#items {
  display: none;
}


JavaScript / jQuery:

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
  // Скрыть список по умолчанию
  $('#items').hide();

  // Обработчик нажатия кнопки
  $('#toggleBtn').click(function() {
    $('#items').toggle();
  });
});


Этот код добавляет обработчик клика на кнопку, который показывает или скрывает список элементов в зависимости от его текущего состояния. Это можно сделать с помощью метода .toggle(). Кроме того, мы начинаем со скрытия списка на старте с помощью CSS-свойства display: none;, чтобы он не отображался при загрузке страницы.

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

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

@vladimir 

В приведенном примере при клике на кнопку "Нажми меня" список элементов будет появляться и исчезать. Если же вы хотите сгруппировать элементы в спойлере так, чтобы они отображались внутри заголовка, можно использовать следующий подход:


HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
    <title>Спойлер с элементами списка</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="spoiler">
    <h3>Нажмите для отображения элементов:</h3>
    <ul id="items">
        <li>Элемент 1</li>
        <li>Элемент 2</li>
        <li>Элемент 3</li>
        <li>Элемент 4</li>
    </ul>
</div>

<script>
    $(document).ready(function() {
        $('#items').hide(); // Скрываем элементы списка по умолчанию

        $('#spoiler').click(function() {
            $('#items').toggle(); // Переключаем отображение элементов списка
        });
    });
</script>

</body>
</html>


В этом примере, элементы группируются внутри спойлера с заголовком "Нажмите для отображения элементов". При клике на этот заголовок, список элементов будет появляться и исчезать.


Вы можете изменить содержимое функции click(), чтобы добавить анимацию или другие дополнительные действия при отображении/скрытии элементов списка.