Bootstrap JS Dropdown
Раскрывающиеся классы CSS
Для учебника о раскрывающихся списках, прочитайте наш Bootstrap Сппаврчник.
Класс | Описание | |
---|---|---|
.dropdown |
Указывает раскрывающееся меню | |
.dropdown-item |
Стиль ссылки внутри выпадающего меню с надлежащей обивка и т.д. | |
.dropdown-item-text |
Стиль текста или текстовые ссылки в выпадающем меню с надлежащей обивка и т.д. | |
.dropdown-menu |
Построение раскрывающегося меню | |
.dropdown-menu-right |
Выравнивание выпадающего меню по правому краю | |
.dropdown-header |
Добавляет заголовок в раскрывающемся меню | |
.dropup |
Указывает дропуп меню | |
.disabled |
Отключает элемент в раскрывающемся меню | |
.active |
Стили активного элемента в раскрывающемся меню | |
.divider |
Разделяет элементы внутри выпадающего меню с горизонтальной линией |
Через Data-* атрибуты
Добавьте data-toggle="dropdown"
ссылку или кнопку, чтобы переключить раскрывающееся меню.
Пример
<button type="button" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</button>
Через JavaScript
Включить вручную с помощью:
Пример
$('.dropdown-toggle').dropdown();
Примечание: Атрибут Data-Toggle = "раскрывающийся список" необходим независимо от того, вызывается ли метод раскрывающегося списка ().
Параметры раскрывающегося списка
None |
Методы раскрывающегося списка
В следующей таблице перечислены все доступные методы раскрывающегося списка.
Метод | Описание | |
---|---|---|
.dropdown("toggle") | Переключает раскрывающийся список. Если установлен, он будет открывать раскрывающееся меню по умолчанию | |
.dropdown("update") | Обновляет положение раскрывающегося списка элемента | |
.dropdown("dispose") | Уничтожает раскрывающийся список элемента |
Выпадающие события
В следующей таблице перечислены все доступные события раскрывающегося списка.
Событие | Описание | |
---|---|---|
show.bs.dropdown | Происходит при отображении раскрывающегося списка. | |
shown.bs.dropdown | Происходит при полном отображении раскрывающегося списка (после завершения CSS-переходов) | |
hide.bs.dropdown | Происходит при скрытии раскрывающегося списка | |
hidden.bs.dropdown | Происходит, когда раскрывающееся меню полностью скрыто (после завершения CSS-переходов) |
Tip: Use jQuery's event.relatedTarget to get the element which triggered the dropdown:
Пример
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});