Bootstrap JS Dropdown

Раскрывающиеся классы CSS

Для учебника о раскрывающихся списках, прочитайте наш Bootstrap Сппаврчник.

Класс	Описание
`.dropdown`	Указывает раскрывающееся меню
`.dropdown-item`	Стиль ссылки внутри выпадающего меню с надлежащей обивка и т.д.
`.dropdown-item-text`	Стиль текста или текстовые ссылки в выпадающем меню с надлежащей обивка и т.д.
`.dropdown-menu`	Построение раскрывающегося меню
`.dropdown-menu-right`	Выравнивание выпадающего меню по правому краю
`.dropdown-header`	Добавляет заголовок в раскрывающемся меню
`.dropup`	Указывает дропуп меню
`.disabled`	Отключает элемент в раскрывающемся меню
`.active`	Стили активного элемента в раскрывающемся меню
`.divider`	Разделяет элементы внутри выпадающего меню с горизонтальной линией

Добавьте data-toggle="dropdown" ссылку или кнопку, чтобы переключить раскрывающееся меню.

<button type="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</button>

Включить вручную с помощью:

$('.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);
});