Как сгруппировать <li> в спойлер на js или jquery?
2 ответа
@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;, чтобы он не отображался при загрузке страницы.
@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(), чтобы добавить анимацию или другие дополнительные действия при отображении/скрытии элементов списка.