twitter-bootstrap
Выпадающие окна Bootstrap

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails

параметры

методы	пример
Вызов через Javascript	`$('.dropdown-toggle').dropdown();`
Переключает выпадающий список	`$('.dropdown-toggle').dropdown('toggle')`
Тип события	Описание
show.bs.dropdown	Это событие срабатывает сразу же после вызова метода show instance.
shown.bs.dropdown	Это событие запускается, когда выпадающее окно становится видимым для пользователя (будет ждать перехода CSS для завершения).
hide.bs.dropdown	Это событие запускается сразу же после вызова метода экземпляра hide.
hidden.bs.dropdown	Это событие запускается, когда выпадающий список скрывается от пользователя (будет ждать перехода CSS для завершения).
Пример обработчика событий	`$(element).on('show.bs.dropdown', function () { // do something… })`

замечания

При вызове Dropdown через Javascript $('.dropdown-toggle').dropdown() Dropdown $('.dropdown-toggle').dropdown() Dropdown $('.dropdown-toggle').dropdown() все равно требуется data-api, т.е. data-toggle="dropdown" . Прочитайте больше

Как пользоваться

Используйте класс .dropdown в родительском элементе выпадающего меню.

Добавьте класс .dropdown-menu в элемент для инициализации плагина выпадающего меню.

Вызовите плагин, используя класс .dropdown-toggle и атрибут data-toggle="dropdown" на кнопке или гиперссылке.

Основной пример

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Option One</a></li>
    <li><a href="#">Option two</a></li>
    <li><a href="#">More Options</a></li>
  </ul>
</div>

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow