Source

Выпадающие списки

Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью плагина раскрывающегося списка Bootstrap.

Обзор

Выпадающие списки — это переключаемые контекстные наложения для отображения списков ссылок и многого другого. Они сделаны интерактивными с помощью прилагаемого плагина JavaScript с раскрывающимся списком Bootstrap. Они переключаются щелчком, а не зависанием; это преднамеренное дизайнерское решение.

Выпадающие списки основаны на сторонней библиотеке Popper.js , которая обеспечивает динамическое позиционирование и обнаружение области просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js/ bootstrap.bundle.js, который содержит Popper.js. Popper.js не используется для позиционирования раскрывающихся списков на панелях навигации, поскольку динамическое позиционирование не требуется.

Если вы создаете наш JavaScript из исходного кода, для этого требуетсяutil.js .

Доступность

Стандарт WAI ARIA определяет фактический role="menu"виджет , но он специфичен для меню, похожего на приложение, которое запускает действия или функции. Меню ARIA могут содержать только элементы меню, элементы меню флажков, элементы меню переключателей, группы переключателей и подменю.

Выпадающие списки Bootstrap, с другой стороны, предназначены для использования в различных ситуациях и структурах разметки. Например, можно создавать раскрывающиеся списки, которые содержат дополнительные входные данные и элементы управления формами, такие как поля поиска или формы входа. По этой причине Bootstrap не ожидает (и не добавляет автоматически) какие-либо roleатрибуты и aria-, необходимые для настоящих меню ARIA . Авторы должны будут сами включать эти более конкретные атрибуты.

Тем не менее, Bootstrap добавляет встроенную поддержку большинства стандартных взаимодействий с меню клавиатуры, таких как возможность перемещаться по отдельным .dropdown-itemэлементам с помощью клавиш курсора и закрывать меню с помощью ESCклавиши.

Примеры

Оберните переключатель раскрывающегося списка (вашу кнопку или ссылку) и раскрывающееся меню внутри .dropdownили в другой элемент, который объявляет position: relative;. Выпадающие списки могут быть активированы из <a>или <button>элементов, чтобы лучше соответствовать вашим потенциальным потребностям.

Выпадающие списки с одной кнопкой

Любой сингл .btnможно превратить в раскрывающийся список с некоторыми изменениями разметки. Вот как вы можете заставить их работать с любыми <button>элементами:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

И с <a>элементами:

<div class="dropdown show">
  <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="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Самое приятное то, что вы можете сделать это с любым вариантом кнопки:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Раскрывающиеся списки кнопок разделения

Точно так же создайте раскрывающиеся списки с разделенными кнопками практически с той же разметкой, что и раскрывающиеся списки с одной кнопкой, но с добавлением .dropdown-toggle-splitправильного интервала вокруг каретки раскрывающегося списка.

Мы используем этот дополнительный класс, чтобы уменьшить горизонталь paddingпо обе стороны от каретки на 25% и удалить его margin-left, добавленный для обычных раскрывающихся списков кнопок. Эти дополнительные изменения сохраняют курсор в центре разделенной кнопки и обеспечивают область нажатия более подходящего размера рядом с основной кнопкой.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Размеры

Раскрывающиеся списки кнопок работают с кнопками всех размеров, включая кнопки по умолчанию и разделенные раскрывающиеся списки.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Вариант дроп-апа

Запускайте раскрывающиеся меню над элементами, добавляя .dropupих к родительскому элементу.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Вариант Dropright

Активируйте выпадающие меню справа от элементов, добавив .droprightих к родительскому элементу.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Дроплевый вариант

Запускайте раскрывающиеся меню слева от элементов, добавляя .dropleftих к родительскому элементу.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Исторически содержимое выпадающего меню должно было быть ссылкой, но в v4 это уже не так. Теперь вы можете при желании использовать <button>элементы в раскрывающихся списках вместо просто <a>s.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

По умолчанию выпадающее меню автоматически позиционируется на 100 % сверху и слева от родительского элемента. Добавить .dropdown-menu-rightв .dropdown-menuвыпадающее меню по правому краю.

Берегись! Выпадающие списки позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в панели навигации).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Добавьте заголовок, чтобы пометить разделы действий в любом раскрывающемся меню.

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Разделяйте группы связанных пунктов меню с помощью разделителя.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Поместите форму в раскрывающееся меню или превратите ее в раскрывающееся меню и используйте утилиты для отступов или отступов , чтобы дать ей необходимое свободное пространство.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Добавьте .activeэлементы в раскрывающемся списке, чтобы сделать их активными .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Добавьте .disabledэлементы в раскрывающемся списке, чтобы сделать их отключенными .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Применение

С помощью атрибутов данных или JavaScript плагин раскрывающегося списка переключает скрытый контент (выпадающие меню), переключая .showкласс в элементе родительского списка. Этот data-toggle="dropdown"атрибут используется для закрытия выпадающих меню на уровне приложения, поэтому рекомендуется всегда использовать его.

На сенсорных устройствах открытие раскрывающегося списка добавляет пустые ( $.noop) mouseoverобработчики к непосредственным дочерним <body>элементам элемента. Этот, по общему признанию, уродливый хак необходим, чтобы обойти причуду в делегировании событий iOS , которая в противном случае не позволяла бы касанию в любом месте за пределами раскрывающегося списка запускать код, который закрывает раскрывающийся список. После закрытия раскрывающегося списка эти дополнительные пустые mouseoverобработчики удаляются.

Через атрибуты данных

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Через JavaScript

Вызовите раскрывающиеся списки через JavaScript:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`все еще требуется

Независимо от того, вызываете ли вы раскрывающийся список через JavaScript или вместо этого используете data-api, data-toggle="dropdown"он всегда должен присутствовать в элементе триггера раскрывающегося списка.

Опции

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-, как в data-offset="".

Имя	Тип	По умолчанию	Описание
компенсировать	номер \| строка \| функция	0	Смещение раскрывающегося списка относительно его цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js .
кувырок	логический	истинный	Разрешить переворачивание выпадающего списка в случае перекрытия ссылочного элемента. Для получения дополнительной информации обратитесь к документации Popper.js .
граница	строка \| элемент	'scrollParent'	Граница ограничения переполнения выпадающего меню. Принимает значения `'viewport'`, `'window'`, `'scrollParent'`или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации по предотвращению переполнения Popper.js .

Обратите внимание, что когда boundaryустановлено любое значение, кроме 'scrollParent', стиль position: staticприменяется к .dropdownконтейнеру.

Методы

Метод	Описание
`$().dropdown('toggle')`	Переключает раскрывающееся меню данной панели навигации или навигации с вкладками.
`$().dropdown('update')`	Обновляет положение раскрывающегося списка элемента.
`$().dropdown('dispose')`	Уничтожает раскрывающийся список элемента.

События

Все события раскрывающегося списка запускаются в .dropdown-menuродительском элементе и имеют relatedTargetсвойство, значением которого является переключаемый элемент привязки.

Мероприятие	Описание
`show.bs.dropdown`	Это событие срабатывает немедленно при вызове метода экземпляра show.
`shown.bs.dropdown`	Это событие запускается, когда раскрывающийся список становится видимым для пользователя (будет ожидать завершения переходов CSS).
`hide.bs.dropdown`	Это событие запускается сразу после вызова метода скрытия экземпляра.
`hidden.bs.dropdown`	Это событие запускается, когда раскрывающийся список перестает быть скрытым от пользователя (будет ждать завершения переходов CSS).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Выпадающие списки

Обзор

Доступность

Примеры

Выпадающие списки с одной кнопкой

Раскрывающиеся списки кнопок разделения

Размеры

Вариант дроп-апа

Вариант Dropright

Дроплевый вариант

Пункты меню

Выравнивание меню

Заголовки меню

Разделители меню

Формы меню

Активные пункты меню

Отключенные пункты меню

Применение

Через атрибуты данных

Через JavaScript

`data-toggle="dropdown"`все еще требуется

Опции

Методы

События

Выпадающие списки

Обзор

Доступность

Примеры

Выпадающие списки с одной кнопкой

Раскрывающиеся списки кнопок разделения

Размеры

Вариант дроп-апа

Вариант Dropright

Дроплевый вариант

Пункты меню

Выравнивание меню

Заголовки меню

Выпадающий заголовок

Разделители меню

Формы меню

Активные пункты меню

Отключенные пункты меню

Применение

Через атрибуты данных

Через JavaScript

data-toggle="dropdown"все еще требуется

Опции

Методы

События

`data-toggle="dropdown"`все еще требуется