Bootstrap JS Выпадающий список
Выпадающий список JS (раскрывающийся список JS)
Раскрывающееся меню представляет собой переключаемое меню, позволяющее пользователю выбрать одно значение из стандартного списка.
Для учебника о раскрывающихся списках, прочитайте наш загрузочный раскрывающийся учебник.
Раскрывающиеся классы плагинов
| Класс | Описание | |
|---|---|---|
| .dropdown | Указывает раскрывающееся меню | |
| .dropdown-menu | Построение раскрывающегося меню | |
| .dropdown-menu-right | Выравнивание выпадающего меню по правому краю | |
| .dropdown-header | Добавляет заголовок в раскрывающемся меню | |
| .dropup | Указывает дропуп меню | |
| .disabled | Отключает элемент в раскрывающемся меню | |
| .divider | Разделяет элементы внутри выпадающего меню с горизонтальной линией |
Через Data-* атрибуты
Добавьте data-toggle="dropdown" ссылку или кнопку, чтобы переключить раскрывающееся меню.
Пример
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</a>
Через JavaScript
Включить вручную с помощью:
Пример
$('.dropdown-toggle').dropdown();
Примечание: Атрибут Data-Toggle = "раскрывающийся список" необходим независимо от того, вызывается ли метод раскрывающегося списка ().
Параметры раскрывающегося списка
| Ни один |
Методы раскрывающегося списка
В следующей таблице перечислены все доступные методы раскрывающегося списка.
| Метод | Описание | |
|---|---|---|
| .dropdown("toggle") | Переключение раскрывающегося списка |
Выпадающие события
В следующей таблице перечислены все доступные события раскрывающегося списка.
| Событие | Описание | |
|---|---|---|
| show.bs.dropdown | Происходит при отображении раскрывающегося списка. | |
| shown.bs.dropdown | Происходит при полном отображении раскрывающегося списка (после завершения CSS-переходов) | |
| hide.bs.dropdown | Происходит при скрытии раскрывающегося списка | |
| hidden.bs.dropdown | Происходит, когда раскрывающееся меню полностью скрыто (после завершения CSS-переходов) |
Совет: Используйте jQuery Event. релатедтаржет , чтобы получить элемент, вызвавший раскрывающийся список:
Пример
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});
Другие примеры
Изменить значок значка вверх вниз
В следующем примере при щелчке по раскрывающемся меню значок курсора изменяется от направленного вниз вверх.
Пример
/* CSS: */
<style>
.caret.caret-up {
border-top-width: 0;
border-bottom: 4px solid #fff;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$(".dropdown").on("hide.bs.dropdown", function(){
$(".btn").html('Dropdown <span class="caret"></span>');
});
$(".dropdown").on("show.bs.dropdown", function(){
$(".btn").html('Dropdown <span class="caret caret-up"></span>');
});
});
</script>
Навигационное меню с раскрывающимся списком
В следующем примере для кнопки на панели навигации добавляется раскрывающееся меню:
Пример
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
В следующем примере добавляется раскрывающееся меню с формой входа в навигационную систему:
Пример
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="glyphicon glyphicon-log-in"></span></a>
<div class="dropdown-menu">
<form id="formlogin" class="form container-fluid">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button type="button" id="btnLogin" class="btn btn-block">Login</button>
</form>
<div class="container-fluid">
<a class="small" href="#">Forgot password?</a>
</div>
</div>
</li>
</ul>
Многоуровневые раскрывающиеся списки
В этом примере мы используем jQuery для открытия многоуровневых раскрывающихся списков при щелчке:
Пример
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
В этом примере мы создали пользовательский класс для многоуровневого раскрывающегося .dropdown-submenu списка:
Пример
/* CSS: */
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
