В Bootstrap есть встроенные функциональности для создания выпадающих списков (dropdowns) с открытием и закрытием. Чтобы настроить закрытие dropdown в Bootstrap, вам потребуется использовать некоторые методы и события JavaScript, которые предоставляет Bootstrap.
Во-первых, вам понадобится включить файлы скриптов Bootstrap в ваш проект. Это можно сделать, добавив следующий код в секцию <head> вашей HTML-страницы:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Когда вы добавите эти файлы скриптов и стилей, вы сможете использовать функциональности Bootstrap для закрытия dropdown.
Bootstrap предоставляет несколько способов закрытия dropdown.
1. Закрытие по клику на ссылку:
Простейший способ - это добавить класс dropdown-toggle к ссылке, которая вызывает dropdown, и класс dropdown-menu к меню dropdown. Таким образом, когда пользователь кликнет на ссылку, меню dropdown будет открываться. А затем, чтобы закрыть dropdown после выбора элемента, вы можете добавить атрибут data-close="dropdown" к элементам списка внутри меню dropdown.
Пример кода ниже:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#" data-close="dropdown">Option 1</a>
<a class="dropdown-item" href="#" data-close="dropdown">Option 2</a>
<a class="dropdown-item" href="#" data-close="dropdown">Option 3</a>
</div>
</div>
В приведенном выше примере, когда пользователь выберет одну из опций (Option 1, Option 2 или Option 3), меню dropdown автоматически закроется.
2. Закрытие при щелчке за пределами dropdown:
Bootstrap также предоставляет функциональность закрытия dropdown при щелчке вне dropdown. Для этого вам необходимо добавить атрибут data-close="dropdown" к элементу, за пределами dropdown, на который пользователь должен кликнуть, чтобы закрыть его.
Пример кода ниже:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<div data-close="dropdown">
Этот элемент будет закрывать dropdown при клике на него
</div>
В приведенном выше примере, если пользователь щелкнет за пределами dropdown, dropdown закроется.
Вышеуказанные способы закрытия dropdown в Bootstrap являются наиболее распространенными, но Bootstrap предлагает и другие функциональности для закрытия dropdown, такие как закрытие при потере фокуса, закрытие при нажатии на клавишу Escape и т. д. Вы можете прочитать документацию Bootstrap, чтобы узнать больше о различных способах настройки закрытия dropdown.