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">
  <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

Запускайте раскрывающиеся меню слева от элементов, добавляя .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>

Вы также можете создавать неинтерактивные выпадающие элементы с помощью .dropdown-item-text. Не стесняйтесь стилизовать дальше с помощью пользовательских CSS или текстовых утилит.

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <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>

Активный

Добавьте .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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</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>

Адаптивное выравнивание

Если вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив data-display="static"атрибут, и используйте адаптивные классы вариантов.

Чтобы выровнять раскрывающееся меню с заданной точкой останова или выше, добавьте .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-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>

Чтобы выровнять левое раскрывающееся меню с заданной точкой останова или выше, добавьте .dropdown-menu-rightи .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

Обратите внимание, что вам не нужно добавлять data-display="static"атрибут к выпадающим кнопкам на панелях навигации, поскольку Popper.js не используется в панелях навигации.

Заголовки

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

<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 p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</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-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </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-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Используйте data-offsetили data-reference, чтобы изменить расположение раскрывающегося списка.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>
</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 .
ссылка	строка \| элемент	'переключать'	Справочный элемент выпадающего меню. Принимает значения `'toggle'`, `'parent'`или ссылки HTMLElement. Для получения дополнительной информации обратитесь к документации ReferenceObject Popper.js .
отображать	нить	«динамический»	По умолчанию мы используем Popper.js для динамического позиционирования. Отключите это с помощью `static`.

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

Методы

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

События

Все события раскрывающегося списка запускаются в .dropdown-menuродительском элементе и имеют relatedTargetсвойство, значением которого является переключаемый элемент привязки. hide.bs.dropdownа hidden.bs.dropdownу событий есть clickEventсвойство (только если исходный тип события — click), которое содержит объект события для события щелчка.

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

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

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

Обзор

Доступность

Примеры

Одна кнопка

Кнопка разделения

Размеры

Направления

Выпадающий

Dropright

Dropleft

Пункты меню

Активный

Неполноценный

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

Адаптивное выравнивание

Содержание меню

Заголовки

Разделители

Текст

Формы

Применение

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

Через JavaScript

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

Опции

Методы

События

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

Обзор

Доступность

Примеры

Одна кнопка

Кнопка разделения

Размеры

Направления

Выпадающий

Dropright

Dropleft

Пункты меню

Активный

Неполноценный

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

Адаптивное выравнивание

Содержание меню

Заголовки

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

Разделители

Текст

Формы

Параметры раскрывающегося списка

Применение

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

Через JavaScript

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

Опции

Методы

События

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