Для того чтобы реализовать выпадающий список, который не будет закрываться автоматически, вам потребуется использовать JavaScript для контроля над событиями, происходящими при взаимодействии с выпадающим списком.
Вариант 1: Использование JavaScript событий
1. Создайте HTML элементы для выпадающего списка. Например:
<button id="dropdown-btn">Нажмите для показа списка</button> <ul id="dropdown-list"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul>
2. Используйте JavaScript, чтобы отслеживать события клика на кнопку и список:
const dropdownBtn = document.getElementById('dropdown-btn'); const dropdownList = document.getElementById('dropdown-list'); // Добавляем обработчик события клика на кнопку dropdownBtn.addEventListener('click', function() { dropdownList.classList.toggle('show'); }); // Добавляем обработчик события клика на список dropdownList.addEventListener('click', function(event) { event.stopPropagation(); // Предотвращаем закрытие списка при клике на элементы списка });
3. В CSS добавьте стили для класса .show
, чтобы показывать выпадающий список:
#dropdown-list { display: none; } #dropdown-list.show { display: block; }
Вариант 2: Использование CSS псевдоклассов
Если вы хотите избежать использования JavaScript, можно воспользоваться только CSS. Для этого можно использовать псевдокласс :hover
, который будет активировать выпадающий список, когда пользователь наводит курсор на кнопку или список:
#dropdown-list { display: none; } #dropdown-btn:hover + #dropdown-list, #dropdown-list:hover { display: block; }
В этой реализации список будет отображаться только при наведении на кнопку или на сам список, и будет закрываться, когда пользователь перестанет наводить указатель мыши на них.
Выбор подходящего варианта зависит от требований вашего проекта. Вариант с использованием JavaScript позволяет больше контролировать, когда выпадающий список должен быть открыт или закрыт, в то время как вариант с использованием CSS позволяет избежать дополнительной логики JavaScript.