Как сделать так, чтобы всплывающее меню Twitter Bootstrap при наведении курсора, а не при нажатии

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

Я создал раскрывающееся меню при наведении курсора, основанное на последней (v2.0.2) платформе Bootstrap, которая поддерживает несколько подменю, и решил опубликовать ее для будущих пользователей:

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

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

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                <ul class="dropdown-menu sub-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
          <li><a href="#">Link</a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="#" href="#">Menu</a>
          </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="nav-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
</ul>

демонстрация

Чтобы меню автоматически появлялось при наведении, это можно сделать с помощью базового CSS. Вам нужно отработать селектор для скрытого пункта меню, а затем настроить его на отображение в виде блока, когда liнаведен соответствующий тег. Если взять пример со страницы начальной загрузки Twitter, селектор будет выглядеть следующим образом:

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

Однако, если вы используете отзывчивые функции Bootstrap, вам не понадобятся эти функции на свернутой панели навигации (на экранах меньшего размера). Чтобы избежать этого, оберните код выше в медиа-запрос:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

Чтобы скрыть стрелку (курсор), это делается по-разному, в зависимости от того, используете ли вы Twitter Bootstrap версии 2 и ниже или версию 3:

Bootstrap 3

Чтобы удалить каретку в версии 3, вам просто нужно удалить HTML <b class="caret"></b>из .dropdown-toggleэлемента привязки:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Бутстрап 2 и ниже

Чтобы удалить каретку в версии 2, вам нужно немного больше узнать о CSS, и я предлагаю посмотреть, как :afterработает псевдоэлемент, более подробно. Чтобы начать понимать, как нацеливать и удалять стрелки в примере начальной загрузки Twitter, вы должны использовать следующий селектор CSS и код:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

Это будет работать в вашу пользу, если вы посмотрите дальше, как они работают, а не просто используете ответы, которые я вам дал.

Спасибо @CocaAkat за указание на то, что мы пропустили дочерний комбинатор ">" для предотвращения отображения подменю при наведении на родительский элемент

В дополнение к ответу из "My Head Hurts" (это было здорово):

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}

Есть 2 проблемы:

1. При нажатии на выпадающую ссылку откроется выпадающее меню. И он останется открытым, если пользователь не щелкнет где-то еще или не наведет на него курсор назад, создав неудобный пользовательский интерфейс.
2. Между раскрывающейся ссылкой и выпадающим меню есть отступ в 1 пиксель. Это приводит к тому, что выпадающее меню становится скрытым, если вы медленно перемещаетесь между выпадающим меню и выпадающим меню.

Решением (1) является удаление элементов "class" и "data-toggle" из ссылки nav

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

Это также дает вам возможность создать ссылку на вашу родительскую страницу - что было невозможно при реализации по умолчанию. Вы можете просто заменить "#" на любую страницу, которую вы хотите отправить пользователю.

Решением (2) является удаление поля на верху в селекторе .dropdown-menu

.navbar .dropdown-menu {
    margin-top: 0px;
}

Я использовал немного JQuery:

// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

Здесь есть много действительно хороших решений. Но я думал, что я пойду вперед и поставлю свою здесь в качестве другой альтернативы. Это просто простой фрагмент jQuery, который делает это так, как при начальной загрузке, если он поддерживает всплывающие окна вместо всплывающих окон. Я только что проверил это с версией 3, поэтому я не знаю, будет ли это работать с версией 2. Сохраните это как фрагмент в вашем редакторе и сделайте это одним нажатием клавиши.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

По сути, он просто говорит, что когда вы наводите курсор на выпадающий класс, он добавляет к нему открытый класс. Тогда это просто работает. Когда вы перестаете зависать на родительском li с выпадающим классом или дочернем ul / li, он удаляет открытый класс. Очевидно, что это только одно из многих решений, и вы можете добавить его, чтобы оно работало только с конкретными экземплярами .dropdown. Или добавьте переход к родительскому или дочернему элементу.

Просто настройте свой стиль CSS в три строки кода

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

Если у вас есть элемент с таким dropdownклассом (например):

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

Затем вы можете иметь выпадающее меню для автоматического раскрытия при наведении курсора, вместо того, чтобы нажимать на его заголовок, используя этот фрагмент кода jQuery:

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

Вот демо

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

[Обновление] Плагин на GitHub и я работаю над некоторыми улучшениями (например, использование только с атрибутами данных (JS не требуется). Я оставляю код ниже, но он не такой, как на GitHub.

Мне понравилась чисто CSS-версия, но приятно иметь задержку до ее закрытия, поскольку обычно она удобнее для пользователя (то есть не наказывается за скольжение мыши, которое выходит за 1 пиксель вне выпадающего списка и т. Д.), И, как упоминалось в комментариях есть 1пкс поля, с которым вам приходится иметь дело, или иногда навигация неожиданно закрывается, когда вы переходите к выпадающему меню из исходной кнопки и т. д.

Я создал небольшой плагин, который использовал на нескольких сайтах, и он отлично работал. Каждый элемент навигации обрабатывается независимо, поэтому у них есть свои таймеры задержки и т. Д.

JS

// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();

// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function() {
        var $this = $(this).parent(),
            defaults = {
                delay: 500,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            options = $.extend(true, {}, defaults, options, data),
            timeout;

        $this.hover(function() {
            if(options.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');

            window.clearTimeout(timeout);
            $(this).addClass('open');
        }, function() {
            timeout = window.setTimeout(function() {
                $this.removeClass('open');
            }, options.delay);
        });
    });
};  

delayПараметр говорит само за себя, и instantlyCloseOthersнемедленно закройте все выпадающие, которые открыты при наведении мыши на новый.

Не чистый CSS, но, надеюсь, поможет кому-то еще в этот поздний час (т.е. это старая ветка).

Если вы хотите, вы можете увидеть различные процессы, которые я прошел (в обсуждении #concrete5IRC), чтобы заставить его работать через различные шаги в этом гисте: https://gist.github.com/3876924

Подход шаблона плагинов намного чище для поддержки отдельных таймеров и т. Д.

Смотрите сообщение в блоге для получения дополнительной информации.

Это сработало для меня:

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

Это встроено в Bootstrap 3. Просто добавьте это в свой CSS:

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

Еще лучше с jQuery:

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});

Вы можете использовать $().dropdown('toggle')метод по умолчанию для переключения выпадающего меню при наведении:

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

Просто хочу добавить, что если у вас есть несколько выпадающих (как я), вы должны написать:

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

И это будет работать правильно.

На мой взгляд, лучший способ таков:

;(function($, window, undefined) {
    // Outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // If instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // The element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $parent.hover(function(event) {

                // So a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    return true;
                }

                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            }, function() {
                timeout = window.setTimeout(function() {
                    $parent.removeClass('open');
                }, settings.delay);
            });

            // This helps with button groups!
            $this.hover(function() {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            });

            // Handle submenus
            $parent.find('.dropdown-submenu').each(function(){
                var $this = $(this);
                var subTimeout;
                $this.hover(function() {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();

                    // Always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function() {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function() {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

    $(document).ready(function() {
        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
        $('[data-hover="dropdown"]').dropdownHover();
    });
})(jQuery, this);

Образец разметки:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>

Лучший способ сделать это - просто вызвать событие нажатия Bootstrap при наведении курсора. Таким образом, он должен оставаться сенсорным устройством.

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

Мне удалось это следующим образом:

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});

Я надеюсь, что это помогает кому-то...

Также добавлено margin-top: 0, чтобы сбросить поле начальной загрузки css для .dropdown-menu, чтобы список меню не исчезал, когда пользователь медленно перемещается из выпадающего меню в список меню.

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

.nav .dropdown-menu {
    margin-top: 0;
}

Это, вероятно, глупая идея, но просто убрав стрелку, указывающую вниз, вы можете удалить

<b class="caret"></b>

Это ничего не делает для того, чтобы направить один, хотя ...

Я опубликовал соответствующий плагин для всплывающей подсказки Bootstrap 3, в котором вы даже можете определить, что происходит при нажатии наdropdown-toggle элемент (щелчок можно отключить):

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

Почему я сделал это, когда уже есть много решений?

У меня были проблемы со всеми ранее существующими решениями. Простые CSS не используют .openкласс для .dropdown, поэтому не будет обратной связи по элементу переключателя раскрывающегося списка, когда раскрывающийся список виден.

Js мешают нажатию .dropdown-toggle, поэтому раскрывающийся список отображается при наведении курсора, а затем скрывается при нажатии на раскрывающемся раскрывающемся меню, а при перемещении мыши всплывающее окно снова появляется. Некоторые решения js нарушают совместимость с iOS, некоторые плагины не работают на современных настольных браузерах, которые поддерживают сенсорные события.

Вот почему я создал плагин Bootstrap Dropdown Hover, который предотвращает все эти проблемы, используя только стандартный API-интерфейс Bootstrap javascript, без какого-либо взлома . Даже атрибуты Aria отлично работают с этим плагином.

Используйте этот код, чтобы открыть подменю при наведении курсора мыши (только на рабочем столе):

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

И если вы хотите, чтобы меню первого уровня было интерактивным, даже на мобильном устройстве, добавьте следующее:

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

Подменю (раскрывающееся меню) открывается при наведении курсора мыши на рабочем столе и при нажатии / прикосновении к мобильному телефону и планшету. После открытия подменю второй щелчок откроет ссылку. Благодаря этому if ($(window).width() > 767)подменю займет всю ширину экрана на мобильном телефоне.

$('.dropdown').hover(function(e){$(this).addClass('open')})

Это скроет

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

Это должно скрывать выпадающие списки и их каретки, если они меньше планшета.

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

Решение jQuery хорошо, но ему нужно будет либо справиться с событиями нажатия (для мобильных устройств или планшетов), так как зависание не будет работать должным образом ... Может быть, возможно, будет определено изменение размера окна?

Ответ Андреса Ильича, кажется, работает хорошо, но его следует заключить в медиа-запрос:

@media (min-width: 980px) {

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }

    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
    }

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

    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
        margin-top: 0;
    }

    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }
    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }
}

Очень простое решение для версии 2, только CSS. Сохраняет одинаковую дружественную функциональность для мобильных устройств и планшетов.

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}

Перезаписать bootstrap.js этим скриптом.

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

}); 

Вот моя техника, которая добавляет небольшую задержку перед закрытием меню после того, как вы перестанете зависать над меню или кнопкой переключения. То, <button>что вы обычно нажимаете для отображения меню навигации #nav_dropdown.

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});

Чтобы улучшить ответ Судхаршана , я обертываю его в медиазапрос, чтобы предотвратить зависание при ширине экрана XS ...

@media (min-width:768px)
{
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }

    .nav .dropdown-menu {
        margin-top: 0;
    }
}

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

Это работает для WordPress Bootstrap:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

Итак, у вас есть этот код:

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

Обычно он работает с событием щелчка, и вы хотите, чтобы он работал с событием наведения мыши. Это очень просто, просто используйте этот код JavaScript / jQuery:

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

Это работает очень хорошо, и вот объяснение: у нас есть кнопка и меню. При наведении курсора на кнопку мы отображаем меню, а когда мы нажимаем кнопку мыши, мы скрываем меню через 100 мс. Если вы удивляетесь, почему я это использую, вам нужно время, чтобы перетащить курсор с кнопки над меню. Когда вы находитесь в меню, время сбрасывается, и вы можете оставаться там столько раз, сколько хотите. Когда вы выйдете из меню, мы сразу же скроем меню без перерыва.

Я использовал этот код во многих проектах, если у вас возникнут какие-либо проблемы с его использованием, не стесняйтесь задавать мне вопросы.