Bootstrap 3 - Выпадающий список (dropdown)

На этом уроке мы научимся добавлять выпадающие меню к различным элементам веб-страницы.

Вы можете добавить выпадающие меню к большинству компонентов Twitter Bootstrap (кнопки, навигационное меню, вкладки и т.д.) с помощью плагина dropdown (выпадающий список).

Добавление выпадающих списков к элементам навигационного меню:

Элемент меню с выпадающим списком
<nav class="navbar navbar-default navbar-static">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".js-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" style="padding:15px 15px;">Название проекта</a>
    </div>
    <div class="collapse navbar-collapse js-navbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Главная</a></li>
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a></li>
            <li><a href="#">Текст подпункта</a></li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a></li>
            <li><a href="#">Текст подпункта</a></li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a></li>
            <li><a href="#">Текст подпункта</a></li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Добавление выпадающих списков к элементам навигационных панелей navs:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Главная</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Меню 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Текст подпункта</a></li>
      <li><a href="#">Текст подпункта</a></li>
      <li class="divider"></li>
      <li><a href="#">Текст подпункта</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Меню 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Текст подпункта</a></li>
      <li><a href="#">Текст подпункта</a></li>
      <li class="divider"></li>
      <li><a href="#">Текст подпункта</a></li>
    </ul>
  </li>
  <li class="dropdown pull-right">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Меню 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Текст подпункта</a></li>
      <li><a href="#">Текст подпункта</a></li>
      <li class="divider"></li>
      <li><a href="#">Текст подпункта</a></li>
    </ul>
  </li>
</ul>

На следующем примере показан процесс добавления выпадающих списков к кнопкам:

<div class="btn-group">
  <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Кнопка <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Пункт 3</a></li>
   </ul>
</div>

На следующем примере показана возможность добавления выпадающего списка к кнопке c помощью дополнительной кнопки со стрелочкой, которая отделена от предыдущей кнопки с помощью разделителя. Для группирования (объединения) двух этих кнопок используется класс .btn-group (группа кнопок).

<div class="btn-group">
  <button type="button" class="btn btn-default">Кнопка</button>
  <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li class="divider"></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</div>

Чтобы изменить размеры кнопок с выпадающим списком Вы можете воспользоваться классами Twitter Bootstrap: .btn-lg (большая кнопка), .btn-sm (маленькая кнопка) и .btn-xs (очень маленькая кнопка).

На следующем примере показана возможность добавления выпадающего меню для кнопки, которая находится в группе кнопок (.btn-group):

<!-- Кнопки, объединенные в группу с помощью класса .btn-group -->
<div class="btn-group">
  <!-- Обычные кнопки -->
  <button type="button" class="btn btn-warning">Обычная кнопка</button>
  <button type="button" class="btn btn-danger">Обычная кнопка</button>
  <!-- Кнопка с выпадающим меню -->
  <div class="btn-group">
    <button type="button" data-toggle="dropdown" class="btn btn-info dropdown-toggle">
      Кнопка с выпадающим меню 
      <span class="caret"></span>
    </button>
    <!-- Выпадающее меню -->
    <ul class="dropdown-menu">
      <!-- Пункты меню -->
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Пункт 3</a></li>
    </ul>
  </div>
</div>

Для создания кнопок сгруппированных вертикально достаточно изменить класс .btn-group на .btn-group-vertical.

<!-- Кнопки, объединенные в группу с помощью класса .btn-group -->
<div class="btn-group-vertical">
  <!-- Обычные кнопки -->
  <button type="button" class="btn btn-warning">Обычная кнопка</button>
  <button type="button" class="btn btn-danger">Обычная кнопка</button>
  <!-- Кнопка с выпадающим меню -->
  <div class="btn-group">
    <button type="button" data-toggle="dropdown" class="btn btn-info dropdown-toggle">
      Кнопка с выпадающим меню 
      <span class="caret"></span>
    </button>
    <!-- Выпадающее меню -->
    <ul class="dropdown-menu">
      <!-- Пункты меню -->
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Пункт 3</a></li>
    </ul>
  </div>
</div>

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

С помощью Data Attributes Twitter Bootstrap Вы можете добавить выпадающие списки (dropdowns) к элементам веб-страницы. Данный принцип реализуется путём добавления к ссылке (<a>) или кнопке (<input>, <button>) атрибута data-toggle="dropdown" и соответствующей разметки. В результате чего, при нажатии на эти элементы, выпадающее меню будет отображаться или скрываться.

Ниже представлена возможность добавления выпадающего меню к ссылке с помощью data attributes:

<div class="dropdown">
  <a href="#" data-toggle="dropdown" class="dropdown-toggle">
    Ссылка с выпадающим меню 
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li class="divider"></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</div>

Если у элемента <a>, который предназначен для вызова выпадающего меню, Вам необходимо сохранить значение атрибута href, то вместо атрибута href="#" используйте атрибут data-target="#".

<div class="dropdown">
  <a data-target="#" href="page.html" data-toggle="dropdown" class="dropdown-toggle">
    Ссылка с выпадающим меню 
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li class="divider"></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</div>

Вы также можете добавить выпадающие списки к элементам веб-страницы с помощью JavaScript. Для этого Вам необходимо вызвать для ссылки или кнопки, используя её идентификатор (#) или имя класса (.), метод Bootstrap dropdown().

Примечание: Использование атрибута data-toggle="dropdown" является необходимым условием для добавления к компоненту выпадающего списка, независимо от того, вызываете ли вы dropdown (выпадающий список) через JavaScript или data-api (data attributes).

<script type="text/javascript">
$(document).ready(function(){
  $(".dropdown-toggle-js").dropdown();
});  
</script>

<div class="dropdown">
  <a href="#" class="dropdown-toggle-js" data-toggle="dropdown">
    Ссылка с выпадающим меню 
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li class="divider"></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</div>

Плагин dropdowns (выпадающий список) не имеет параметров, но зато имеет следующий метод: $().dropdown('toggle')

Этот метод показывает или скрывает (т.е. переключает из одного состояния в другое) выпадающее меню для указанного с помощью селектора (идентификатора или класса) элемента веб-страницы. Демонстрация этого метода рассмотрена в вышеприведенном примере.

Все события связанные с выпадающими списками выполняются на уровне родительского элемента .dropdown-menu (элемента, который управляет отображением или скрытием выпадающего меню). События и их описания представлены в следующей таблице:

Событие Описание
show.bs.dropdown Это событие срабатывает сразу после вызова метода show (показать). Элемент <a>, который управляет отображением или скрытием выпадающего списка для этого события, доступен через свойство relatedTarget.
shown.bs.dropdown Это событие срабатывает, когда выпадающий список становится видимым для пользователя (т.е. когда выполнены все CSS стили, необходимые для отображения выпадающего списка).
hide.bs.dropdown Данное событие срабатывает сразу же после вызова метода hide (скрыть). Элемент <a>, который управляет отображением или скрытием выпадающего списка для этого события, доступен через свойство relatedTarget
hidden.bs.dropdown Это событие срабатывает, когда выпадающий список был окончательно скрыт от пользователя (т.е. когда выполнены все CSS стили, необходимые для скрытия выпадающего списка).
<script type="text/javascript">
$(document).ready(function(){
    $(".dropdown-events").on("show.bs.dropdown", function(e){
        // Присвоить переменной textMenuItem текст ссылки
        var textMenuItem = $(e.relatedTarget).text();
        alert("Нажмите на OK для просмотра выпадающего меню для пункта: " + textMenuItem);
    });
});
</script>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li class="dropdown dropdown-events">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Пункт 3 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Подпункт 1</a></li>
      <li><a href="#">Подпункт 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Подпункт 3</a></li>
    </ul>
  </li>
  <li class="dropdown pull-right dropdown-events">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Пункт 4 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Подпункт 1</a></li>
      <li><a href="#">Подпункт 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Подпункт 3</a></li>
    </ul>
  </li>
</ul>
Событие, которые срабатывает сразу после вызова метода show


   Bootstrap 0    41713 0

Комментарии (51)

  1. Сергей # 0
    Добрый день.
    Я правильно понимаю, что атрибут
    data-target="#"
    только сохраняет видимость значения атрибута
    href="page.html"
    , а перехода по ссылке все равно не будет?
    1. Александр Мальцев # 0
      Добрый день, Сергей.
      Данный способ используется для того чтобы ссылка кроме раскрывающегося списка, который вызывается при нажатии на неё, имела ещё и атрибут href. Значение данного атрибута пользователь может увидеть при поднесении к ней курсора. А также при необходимости может перейти по данной ссылке, например с помощью соответствующего пункта из контекстного меню, которое можно вызвать, нажав на ссылку правой кнопкой мыши. Т.е. в этом случае ссылка остаётся ссылкой и куда ведёт.
      1. Дмитрий # 0
        А как сделать, чтобы оставалась возможность осуществить переход по этой ссылке?
    2. Сергей # 0
      А как сделать, чтобы список раскрывался при наведении, а не при клике?
      А при клике был переход по
      href="page.html"
      1. Александр Мальцев # 0
        Это не очень хорошее решение. А как быть с мобильными пользователями?
        Код HTML:
        <div class="dropdown">
          <a href="page.html" class="dropdown-toggle">Ссылка с выпадающим меню<b class="caret"></b></a>
          <ul class="dropdown-menu">
          ...
          </ul>
        </div>
        
        Код JavaScript:
        $(document).ready(function () {
          $('.dropdown-toggle').mouseover(function() {
            $('.dropdown-menu').show();
          })
          $('.dropdown-toggle').mouseout(function() {
            t = setTimeout(function() {
              $('.dropdown-menu').hide();
            }, 500);
            $('.dropdown-menu').on('mouseenter', function() {
              $('.dropdown-menu').show();
              clearTimeout(t);
            }).on('mouseleave', function() {
              $('.dropdown-menu').hide();
            })
          })
        })
        
      2. Billy # 0
        Спасибо, много различных вариантов представлено.
        Но нигде не могу найти как сделать следующим образом.
        Хочу прикрутить выпадающее меню к списку мобильных телефонов на сайте.
        Задача в следующем.
        На моем сайте в шашке есть номера телефонов, необходимо выпадающее меню, чтобы когда клиент из списка выбрал нужный номер и дальше перемещался по сайту, то этот выбранный номер не пропадал и все время был в списке.

        Все встречаемые мной варианты позволяли развернуть меню, выбрать номер, но когда открывал другую страницу номер становился на самый первый по списку, т.е. по умолчанию.
        1. Александр Мальцев # 0
          Здравствуйте.

          Чтобы это осуществить, Вам надо куда-то сохранять Ваши значения.
          Например, это можно организовать с помощью LocalStorage или cookies.
        2. billy # 0
          а не подскажите начинающему специалисту, как это сделать можно?
          1. Александр Мальцев # 0
            Работа с LocalStorage выглядит следующим способом:
            1. Сохранить значение в LocalStorage под определённым ключом
            2. Получить значение из LocalStorage по имени ключа

            Например:
            // после загрузки страницы
            $(document).ready(function () {
              // послы открытия выпадающего списка
              $('#myMenu').on('show.bs.dropdown', function () {
                // сохраняем текст первого пункта меню в переменную text
                var text = $('#myMenu ul.dropdown-menu li:first-child').text();
                // сохраняем это значение в LocalStorage. Имя ключа - myMenu
                localStorage.setItem("myMenu", text); //-> myMenu : "Значения 1 пункта";
              });
              // после загрузки страницы читаем значение myMenu
              // если оно не равно null, то
              if (localStorage.getItem("myMenu") != null) {
                // например, вставляем перед первым пунктом пункт, содержащий этот текст.
                // Получаем данный текст из LocalStorage по имени ключа с помощью метода getItem 
                $("<li>"+localStorage.getItem("myMenu")+"</li>").insertBefore("#myMenu ul.dropdown-menu li:first-child");
              }
            });
            
          2. Николай # 0
            Добрый день, присоединяюсь к вопросу billy — как сделать так, что бы текст выбранного пункта выпадающего меню заменял текст в самой ссылке.
            Например в дропдауне Пункт 2 я выбираю «подпункт 3» и при выборе подпункта становится подпункт 3
            1. Александр Мальцев # 0
              Добрый день, Николай!

              <div class="dropdown">
                <a href="#" data-toggle="dropdown">
                  Ссылка с выпадающим меню 
                  <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="#">Пункт 1</a></li>
                  <li><a href="#">Пункт 2</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Пункт 3</a></li>
                </ul>
              </div>
              
              <script>
              $(".dropdown-menu li a").click(function(){
                $(this).parents(".dropdown").find('a:first').html($(this).text() + ' <span class="caret"></span>');
              });
              </script>
              
              1. Алексей # 0
                Добрый день!
                Вы не подскажете, почему данный скрипт не работает на телефонах?
                На компах, планшетах всё норм.
                1. Александр Мальцев # 0
                  Какой браузер и телефон?
                  Попробуйте его использовать так:
                  <script type="text/javascript">
                  $(function(){
                    $(".dropdown-menu li a").click(function(){
                      $(this).parents(".dropdown").find('a:first').html($(this).text() + ' <span class="caret"></span>');
                    });
                  });
                  </script>
                  1. Алексей # 0
                    Спасибо за ответ! Такой вариант тоже не работает(

                    Samsung Galaxy Note 2
                    Браузер Хром

                    Вот этот код на компе работает, на телефоне не выскакивает даже алерт.
                    Сайт — aleksey.tessellagrid3.com/alexey/ukinua.sam/#programme_description
                    Выпадающее меню в поле регистрации.

                    <script type="text/javascript">
                        $(".dropdown-menu li a").click(function(){
                            alert("Спасибо за посещение!");
                            $(this).parents(".dropdown").find('a:first').html($(this).text() + ' <span class="caret"></span>');
                        });
                     </script>
                    
                    1. Александр Мальцев # 0
                      Скорее всего какая-то ошибка вылезает в скриптах.
                      Попробуйте перенести этот код сразу после подключения библиотеки jQuery. А так по хорошему надо выловить инструкцию javascript которая приводит к ошибке и заключить её в try..catch, чтобы она не останавливала выполнение другой части кода.
                      P.S. Открыл Ваш сайт у себя на смартфоне — всё ОК.
            2. Николай # 0
              Спасибо Вам огромное, всё работает. По поводу бутстрапа всегда захожу только к Вам на сайт.
              З.Ы. У Вас безумный футер, очень прикольною
              1. Виталий # 0
                Добрый день!
                Подскажите, как вызвать показ выпадающего меню извне, т.е. не из того div, в котором это меню находится?
                <div class="dropdown" id="div01">
                    <button id="dLabel01" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown trigger
                        <span class="caret"></span>
                     </button>
                     <ul class="dropdown-menu" aria-labelledby="dLabel01" id="drop01">
                        <li>Menu1</li>
                        <li>Menu2</li>
                     </ul>
                     <!-- Этот вызов работает -->
                     <button data-toggle="dropdown" onclick="return $('.dropdown-toggle').dropdown();">Открыть 1 список</button>
                </div>
                
                <!-- Этот вызов не работает -->
                <button data-toggle="dropdown" onclick="return $('#dLabel01').dropdown('toggle');">Открыть 1 список</button>
                
                Если в меню сделать обработку выпадающего меню, то вторая кнопка тоже начинает работать, но relatedTarget=undefined. о_О
                    <script type="text/javascript">
                        $(document).ready(function () {
                            $('#div01').on('shown.bs.dropdown', function (e) {
                                var o = e.relatedTarget;
                                alert("Метод вызвал компонент: `" + o.textContent + "`");
                            });
                        });
                    </script>
                
                
                1. Александр Мальцев # 0
                  Просто добавив вызов метода .dropdown('toggle'). При этом не стоит забывать о всплытии событии…
                  Т.к. события по умолчанию всплывают. Об этом можете почитать в статье JavaScript — Всплытие события. Это необходимо сделать для того чтобы document не закрыл его, когда вы его открыли кнопкой.

                  Т.е. будет так:
                  <div class="dropdown" id="div01">
                    <button id="dLabel01" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Dropdown trigger
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dLabel01" id="drop01">
                      <li>Menu1</li>
                      <li>Menu2</li>
                    </ul>
                    <button data-toggle="dropdown" class="myButton">Открыть 1 список</button>
                  </div>
                  <button data-toggle="dropdown" class="myButton">Открыть 1 список</button>
                  <script>
                  $('.myButton').click(function(e) {
                    //запретить всплытие события
                    e.stopPropagation();
                    $("#dLabel01").dropdown('toggle');
                  }); 
                  </script>
                  
                  1. Виталий # 0
                    Тогда по нажатию кнопки меню появляется и тут же закрывается опять.
                    1. Karssen # 0
                      Подскажите возможна ли следующая реализация перехода по ссылке в выпадающем меню и какие у нее могут быть подводные камни.
                      <div class="dropdown  dropdown-events">
                        <a href="page.html" class="dropdown-toggle">Ссылка с выпадающим меню<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                        ...
                        </ul>
                      </div>
                      <script type="text/javascript">
                              $(document).ready(function () {
                                  $(".dropdown-events").on("hidden.bs.dropdown", function(e){
                      
                                    var href = $(e.relatedTarget).attr('href');
                                    location.href = href;
                      
                                 });
                              });
                          </script>
                      1. Александр Мальцев # 0
                        1. В вашем коде у элемента a не хватает атрибута data-toggle со значением dropdown.
                        <a href="page.html" data-toggle="dropdown" class="dropdown-toggle">Ссылка с выпадающим меню<b class="caret"></b></a>
                        
                        2. В скрипте ошибки, как в ниже приведённом примере. Правильно будет так:
                        <script>
                        $(document).ready(function () {
                          $(".dropdown-events").on("hide.bs.dropdown", function(e){
                            var href = $(e.relatedTarget).attr('href');
                            location.href = href;
                          });
                        });
                        </script>
                        
                        Здесь подводный камень один… При закрытии выпадающего списка осуществлять переход по ней. Как-то не совсем разумно. Надо хотя бы предупредить пользователя. Для чего это?
                        Просто создайте кнопку и в выпадающем меню расположите все необходимые ссылки. Если Пользователю что-то понравится, то он нажмёт на неё и тем самым осуществит переход. А если нет, то закроет список и будет просматривать страницу дальше. А так бац и какой-то переход…
                        Вот если бы Вы сделали раскрывающий список при наведении…
                  2. Karssen # 0
                    Не знаю что за баг это у Бутстрапа. Но в следующем коде осуществляется переход по ссылке при закрытии выпадающего меню. По какой причине не понятно.
                    <li class="dropdown dropdown-events">
                                                    <a data-toggle="dropdown" class="dropdown-toggle" data-target="#" href="lessons.html"><span class="fa fa-folder-open-o"></span> Уроки и статьи <b class="caret"></b></a>
                                                    <ul role="menu" class="dropdown-menu">
                                                        <li><a href="https://yandex.ru/search/?text=%D0%BE%D0%B9%D0%B3%D1%83%D0%BA%D0%BD&lr=959&clid=2121033">Windows</a></li>
                                                        <li><a href="#">Mac OS</a></li>
                                                        <li><a href="#">Linux</a></li>
                                                        <li><a href="#">Другие системы</a></li>
                                                    </ul>
                                                </li>
                    $(".dropdown-events").on("hidden.bs.dropdown", function(e){
                    
                            console.log(e.relatedTarget.textContent);
                    
                        });
                    1. Александр Мальцев # 0
                      У Вас ошибка в коде JavaScript. Т.к. в этом событии Вы не можете обратиться к relatedTarget, из-за того что его просто нет. Там доступен только target. Ошибка в Вашем коде приводит к неправильной работе компонента…
                      Если Вам необходимо получить relatedTarget, то следует использовать hide.bs.dropdown:
                      $(".dropdown-events").on("hide.bs.dropdown", function(e){
                        console.log(e.relatedTarget.textContent);
                      });
                      
                    2. Евгений # 0
                      Подскажите, как сделать, допустим у меня есть несколько параметров с отметками таких как флажки и радио кнопки в выпадающем списке, но при отметке одного параметра список закрывается, как сделать чтобы не закрывалась а допустим по кнопке закрыть она закрывалась?
                      1. Александр Мальцев # 0
                        Написать скрипт на языке JavaScript:
                        //запретить всплытие события click для необходимых элементов
                        //например для элементов input и label расположенных в .dropdown-menu
                        //т.е. при клике мы запрещаем данному событию всплывать и оно не закрывает меню
                        $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
                          e.stopPropagation();
                        });
                        //mymenu - id ссылки или кнопки, с помощью которой Вы хотите закрыть меню
                        $('#mymenu').click(function(e) {
                          //запрещаем всплытие события
                          e.stopPropagation();
                          //dropdownMenu1 - id ссылки или кнопки открывающей выпадающее меню
                          $('#dropdownMenu1').dropdown('toggle');
                        });
                        
                      2. Евгений # 0
                        никакого результата, он все равно сам закрывается, мне нужно чтобы раскрывающий список не закрывался допустим при клике по контенту сайта, то есть нужно чтобы пользователь мог выбрать несколько флажков или радио кнопок
                        1. Александр Мальцев # 0
                          Ну, сделайте тогда всё вручную.
                          1. Удалите у кнопки, открывающий список следующий атрибут:
                          data-toggle="dropdown"
                          
                          Теперь выпадающий список не будем сам открываться и закрываться…
                          2. Добавьте к этой кнопке идентификатор. Например, myMenu.

                          В итоге получилось:
                          <div class="dropdown">
                            <button class="btn btn-default" type="button" id="myMenu">
                              Меню
                              <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="myMenu">
                            ...
                          
                          3. Добавить скрипт для управления этим меню:
                          $('#myMenu').click(function() {
                            // если список открыт, то закрыть его
                            // иначе открыть его
                            if ($(this).parent().hasClass('open')) {
                              $(this).parent().removeClass('open');
                            }
                            else {
                              $(this).parent().addClass('open');
                            }
                          });
                          
                          4. Ну и js скрипт для другой кнопке (закрыть):
                          //button5 - id кнопки закрыть
                          $('#button5').click(function(){
                            $('#myMenu').parent().removeClass('open');
                          });
                          
                        2. Евгений # 0
                          Спасибо!
                          1. Oleg # 0
                            Здравствуйте!
                            Подскажите пожалуйста как сделать чтобы в одном dropdown лежали 2 кнопки и 2 меню, при этом нужное меню всплывает при нажатии на нужную кнопку.
                            1. Александр Мальцев # 0
                              Здравствуйте.
                              Посмотрите решение на jsFiddle:
                              _http://jsfiddle.net/itchief/bg280v1g/
                            2. tweenfaster # 0
                              Полезное дело делаете, Александр. В комментариях очень подробно помогаете. Спасибо.
                              1. АлексейВитальевич # 0
                                Спасибо Александру хочу сказать за его труд, почти всегда нахожу ответ на искомую задачу. шеф рулит )
                                1. Alena # 0
                                  Подскажите пожалуйста, можно ли сделать так что бы при клике на «шапку» выпадающего меню открывалась одна ссылка, а уже при клике на стрелочку и выборе подпункта открывались другие ссылки?
                                  1. Александр Мальцев # 0
                                    Используйте кнопки, в которых выпадающий список отделён от неё с помощью разделителя:
                                    <div class="btn-group">
                                      <button type="button" class="btn btn-default">Кнопка</button>
                                      <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
                                      <ul class="dropdown-menu">
                                        <li><a href="#">Пункт 1</a></li>
                                        <li><a href="#">Пункт 2</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Пункт 3</a></li>
                                      </ul>
                                    </div>
                                    
                                  2. Jlaz # 0
                                    Здравствуйте. В развёрнутом меню все списки открываются при наведении на соответствующий элемент, а также при клике работают ссылки для перехода на другие страницы. Просмотрев все решения так и не понял, как сделать так, чтобы в мобильном меню у каждого dropdown пункта были 2 кнопки, одна часть кнопки с назанием осуществляет переход на другую страницу, а другая часть — стрелочка осуществляет открытие списка. А самое главное чтобы при этом всём сохранить открытие списков при наведении в развёрнутом меню для пользователей ПК
                                    <div class="collapse navbar-collapse navbar-responsive-collapse">
                                    				<ul class="nav navbar-nav" style="width: max-content; ">
                                    					<li class="dropdown">
                                    					 	  <a data-target="#" href="about.html" class="dropdown-toggle" 	data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">О компании<span class="caret"></span></a>
                                    					<ul class="dropdown-menu">
                                    						<li>
                                    							<a href="business.html">Развитие</a>
                                    						</li>
                                    						<li>
                                    							<a href="news.html">Новости</a>
                                    						</li>
                                    					</ul>
                                    				</li>
                                    	<!-- /О компании -->
                                    
                                    
                                    
                                    1. Сергей # 0
                                      Здравствуйте!
                                      Подскажите, пожалуйста, как сделать так, чтоб ширина кнопки для dropdown было равна ширине самого списка dropdown(ширина списка намного больше ширины кнопки). Изрыл весь интернет и не нашёл ответа на вроде простейший вопрос.
                                      1. Александр Мальцев # 0
                                        Здравствуйте! А как можно узнать ширину раскрывающего списка, который ещё не открыт? А если не знаешь какая будет ширина, то как её можно установить.
                                      2. Антон # 0
                                        Доброго времени суток. Подскажите, пожалуйста, как растянуть группу из кнопки и выпадающего меню по размеру родительского элемента, при этом необходимо, чтобы они имели разные размеры?
                                        Если использовать .btn-block, то обе кнопки растягиваются по ширине родительского элемента в две строчки, а .btn-group-justified делает кнопки одинаковых размеров, равных половине ширины родительского элемента.
                                        <div class="col-sm-4 col-sm-offset-4">
                                         	<div class="btn-group btn-block">
                                                	<button type="button" class="btn btn-default  btn-block">Select Year</button>
                                                        <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle btn-block">
                                                                      <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                                                                      </button>
                                                                      <ul class="dropdown-menu">
                                                                        <li><a href="#">Пункт 1</a></li>
                                                                        <li><a href="#">Пункт 2</a></li>
                                                                        <li class="divider"></li>
                                                                        <li><a href="#">Пункт 3</a></li>
                                                                      </ul>
                                         	</div>
                                         </div>  
                                        
                                        1. Александр Мальцев # 0
                                          Попробуйте так:
                                          <div class="col-sm-4 col-sm-offset-4">
                                            <div class="btn-group btn-block">
                                              <button type="button" class="btn btn-default" style="width: calc(100% - 32px);">Select Year</button>
                                              <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">
                                                <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                                              </button>
                                              ...
                                            </div>
                                          </div>  
                                          
                                        2. Владимир # 0
                                          Александр, здравствуйте! Благодарю за вашу помощь другим в освоении бутстрапа. Надеюсь, теперь сможете помочь и мне. Можете подсказать — как сделать появление подменю из дропдауна не по клику, а при наведении?
                                          1. Александр Мальцев # 0
                                            Здравствуйте, Владимир.
                                            Если выхотите сделать dropdown с hover подпунктами, то необходимо выполнить следующие действия.
                                            Добавить в свой файл CSS следующий код:
                                            .dropdown-submenu {
                                              position:relative;
                                            }
                                            .dropdown-submenu>.dropdown-menu {
                                              top:0;left:100%; margin-top:-6px; margin-left:-1px; -webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px;
                                            }
                                            .dropdown-submenu:hover>.dropdown-menu {
                                              display:block;
                                            }
                                            .dropdown-submenu>a:after {
                                              display:block; content:" "; float:right; width:0; height:0; border-color:transparent; border-style:solid; border-width:5px 0 5px 5px; border-left-color:#cccccc; margin-top:5px; margin-right:-10px;
                                            }
                                            .dropdown-submenu:hover>a:after {
                                              border-left-color:#ffffff;
                                            }
                                            .dropdown-submenu.pull-left {
                                              float:none;
                                            }
                                            .dropdown-submenu.pull-left>.dropdown-menu {
                                              left:-100%; margin-left:10px; -webkit-border-radius:6px 0 6px 6px; -moz-border-radius:6px 0 6px 6px; border-radius:6px 0 6px 6px;
                                            }
                                            
                                            HTML-код dropdown с подменю:
                                            <div class="dropdown pull-left">
                                              <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown">Кнопка <span class="caret"></span></button>
                                              <ul class="dropdown-menu">
                                                <li><a href="#">Пункт 1</a></li>
                                                <li><a href="#">Пункт 2</a></li>
                                                <li><a href="#">Пункт 3</a></li>
                                                <li class="dropdown-submenu">
                                                  <a href="#">Пункт 4 с подменю</a>
                                                  <ul class="dropdown-menu">
                                                    <li><a href="#">Пункт 4.1</a></li>
                                                    <li><a href="#">Пункт 4.2</a></li>
                                                  </ul>
                                                </li>
                                              </ul>
                                            </div>
                                            
                                            1. Александр Мальцев # 0
                                              А если просто обычный dropdown, который будет вызываться по наведению, то так.
                                              HTML-код:
                                              <div class="dropdown pull-left">
                                                <button class="btn btn-warning" type="button">
                                                  Поднесите курсор к кнопке</button>
                                                <ul class="dropdown-menu">
                                                  <li><a href="#">Пункт 1</a></li>
                                                  <li><a href="#">Пункт 2</a></li>
                                                  <li><a href="#">Пункт 3</a></li>
                                                </ul>
                                              </div>
                                              
                                              JavaScript-код:
                                              <script>
                                              $(function(){
                                                $('.dropdown').hover(
                                                  function() {
                                                    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(300);
                                                  }, 
                                                  function() {
                                                    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(300);
                                                  }
                                                );
                                              });
                                              </script>
                                              
                                              1. Владимир # 0
                                                У меня получилось проще

                                                .dropdown:hover > .dropdown-menu {
                                                display: block;
                                                }

                                                добавил это правило в стили
                                            2. Булат # 0
                                              Привет, из за чего список выпадает только со второго нажатия на кнопку, а после начинает нормально срабатывать. Но если снова перезагрузить страницу, то он опять срабатывает только со второго раза, а потом опять нормально работает.
                                              <div class="dropdown">
                                                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" onclick = "$('.dropdown-toggle').dropdown();">
                                                      Dropdown Example
                                                      <span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                      <li><a href="#">HTML</a></li>
                                                      <li><a href="#">CSS</a></li>
                                                      <li><a href="#">JavaScript</a></li>
                                                    </ul>
                                                  </div>
                                              
                                              Если же использовать
                                              $('.dropdown-toggle').dropdown('toggle');
                                              То список выпадает с первого раза, но после того как он закрылся, больше не открывается при нажатии на кнопку.
                                              1. Александр Мальцев # 0
                                                Используйте атрибут data-toggle или JavaScript.
                                                Удалите из строчки onclik:
                                                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                                                
                                              2. Виктор # 0
                                                Здравствуйте, Александр!

                                                Помогите пожалуйста разобраться с выпадающим меню на bootstrap 2, сайт на modx.

                                                Меню работает: всплывают вложенные элементы при наведении, но не работает переход по ссылке на родительский элемент. Хочу сделать что бы эта ссылка работала. Конфликта с мобильными пользователями не будет, т.к. для них есть отдельное меню.


                                                Код меню:
                                                <li class="dropdown [[+wf.classnames]]">
                                                    <a class="dropdown-toggle" data-toggle="dropdown" href="[[+wf.link]]">[[+wf.linktext]] <b class="caret"></b></a>
                                                    [[+wf.wrapper]]
                                                </li>
                                                Какие стили нужно подключить в CSS?
                                                .dropdown:hover > .dropdown-menu {
                                                display: block;
                                                }
                                                Вот этот добавлен, но ссылка всё равно не активна.
                                                Простите, но я совсем новичок в этой теме, надеюсь на вашу помощь :(
                                                1. Александр Мальцев # 0
                                                  Здравствуйте, Виктор.
                                                  1. Сделать меню открывающимся при наведении. Для этого добавить в CSS следующий код:
                                                  .dropdown:hover .dropdown-menu {
                                                    display: block;
                                                    margin-top: 0;
                                                  }
                                                  
                                                  2. Добавить на станицу скрипт, который будет при нажатию на пункт, переходит по адресу указанному в href:
                                                  $(function() {
                                                    $('.dropdown a.dropdown-toggle').click(function() {
                                                      location.href = $(this).attr('href');
                                                    });
                                                  });
                                                  
                                                  1. Виктор # 0
                                                    Спасибо большое, решил вопрос!
                                                    Меню уже и так открывалось при наведении, а вот скрипт очень помог!
                                                    Единственное, как для новичка, можно было указать что этот скрипт нужно добавить на страницу в тело скрипта:
                                                    <script type="text/javascript">
                                                    $(function() {
                                                      $('.dropdown a.dropdown-toggle').click(function() {
                                                        location.href = $(this).attr('href');
                                                      });
                                                    });
                                                    </script>
                                                2. Тимофей # 0
                                                  Добрый день, подскажите пожалуйста, как сделать, чтоб выпадающее меню удлинялось вправо, а не влево?
                                                  1. Александр Мальцев # 0
                                                    Добавить к классу dropdown-menu класс dropdown-menu-right:
                                                    <ul class="dropdown-menu dropdown-menu-right">
                                                      ...
                                                    </ul>
                                                    
                                                  2. Тимофей # 0
                                                    И еще вопрос, создал шаблон на html, все работает гуд, прикрутил его к joomla 3.6.4 и теперь при нажатии на кнопку меню не открывается, а открываются все при наведении, в чем может быть проблема? То есть я нажал на кнопку и после при наведении на любую другую выкатывается подменю, как щелкну в пустое место, все по новой.

                                                    Вы должны авторизоваться, чтобы оставлять комментарии.