ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip

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);
});