Для того чтобы при нажатии на кнопку всплывал список, вам понадобится использовать JavaScript, а точнее обработчик событий и CSS. Вот шаги, которые помогут вам реализовать данный функционал:
1. HTML разметка:
<button id="button">Нажми меня</button> <ul id="list" class="hidden"> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> </ul>
2. CSS стили:
.hidden { display: none; }
3. JavaScript код:
// Получаем ссылки на элементы кнопки и списка const button = document.getElementById('button'); const list = document.getElementById('list'); // Добавляем обработчик события на кнопку button.addEventListener('click', () => { // Проверяем, скрыт ли список const isListHidden = list.classList.contains('hidden'); if (isListHidden) { // Если список скрыт, то удаляем класс hidden и показываем список list.classList.remove('hidden'); } else { // Если список отображается, то добавляем класс hidden и скрываем список list.classList.add('hidden'); } });
Суть решения заключается в следующем: при нажатии на кнопку, обработчик события с помощью метода classList.contains()
проверяет, скрыт ли список (для этого у списка есть CSS класс "hidden"). Если список скрыт, обработчик удаляет этот класс и список становится видимым. Если список уже отображается, то обработчик добавляет класс "hidden" и скрывает список.
Однако, этот код представляет очень простой пример всплывающего списка. Вы можете его доработать в соответствии с вашими потребностями, например, добавить анимации или дополнительные функции, такие как обработка выбора элемента списка.