Последние учебники веб-разработки
 

Bootstrap JS Дропдаун

❮ Предыдущий Следующий Ссылка ❯

JS Dropdown (dropdown.js)

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

Для учебника о Dropdowns, читайте наш Bootstrap Dropdowns Учебник .

Классы Дропдаун Plugin

Класс Описание пример
.dropdown Указывает, выпадающее меню Попробуй
.dropdown-menu Строит ниспадающее меню Попробуй
.dropdown-menu-right Щелкните правой кнопкой выравнивает выпадающее меню Попробуй
.dropdown-header Добавляет заголовок в выпадающем меню Попробуй
.dropup Указывает меню dropup Попробуй
.disabled Отключает элемент в раскрывающемся меню Попробуй
.divider Разделяет элементы внутри выпадающего меню с горизонтальной линией Попробуй

Via data-* Атрибуты

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

пример

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</a>
Попробуй сам "

Через JavaScript

Включить вручную с помощью:

пример

$('.dropdown-toggle').dropdown();
Попробуй сам "

Примечание: data-toggle="dropdown" требуется атрибут независимо от того, вы называете ли dropdown() метод.

DropDown Опции

None

DropDown Методы

В следующей таблице перечислены все доступные методы выпадающие.

метод Описание Попробуй
.dropdown("toggle") Переключает выпадающий Попробуй

DropDown События

В следующей таблице перечислены все доступные выпадающие события.

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

Совет: Используйте JQuery в event.relatedTarget , чтобы получить элемент , который инициировало выпадающего меню:

пример

$(".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>
Попробуй сам "

Navbar С Дропдаун

Следующий пример добавляет выпадающее меню для кнопки в панели навигации:

пример

<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>
Попробуй сам "

Dropdowns Многоуровневые

В этом примере мы используем 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>
Попробуй сам "

❮ Предыдущий Следующий Ссылка ❯