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

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

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

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

@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;    
}

Есть две длительные проблемы:

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

Решение (1) устраняет элементы "класса" и "данные" из навигационной ссылки

<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();
});

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

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

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

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

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

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

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

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

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 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, но, надеюсь, поможет кому-то еще в этот поздний час (т.е. это старый поток).

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

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

Подробнее см. сообщение в блоге.

Если у вас есть элемент с классом 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 answer, я внесли некоторые изменения и добавил некоторые дополнения, чтобы правильно открыть выпадающее меню

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

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

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

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

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

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

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

ul.nav li.dropdown:hover > ul.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');
});

Я справился с этим следующим образом:

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

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

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

;(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 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>

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

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

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

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

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

Это ничего не делает для указателя вверх, хотя...

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

$('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) подменю будет отображать полную ширину экрана на мобильном устройстве.

Я опубликовал правильный плагин для функции выпадающего списка выпадающего списка 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 отлично работают с этим плагином.

Решение 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;
    }
}

Это скроет верхние

.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;
    }
}

Вот JSFiddle → https://jsfiddle.net/PRkonsult/mn31qf0p/1/

Бит JavaScript внизу - это то, что делает реальная магия.

HTML

<!--http://getbootstrap.com/components/#navbar-->
<div class="body-wrap">
  <div class="container">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-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><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-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><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </div>
</div>

CSS

/* Bootstrap dropdown hover menu */

body {
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #4f5d6e;
  position: relative;
  background: rgb(26, 49, 95);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(10%, rgba(26, 49, 95, 1)), color-stop(24%, rgba(29, 108, 141, 1)), color-stop(37%, rgba(41, 136, 151, 1)), color-stop(77%, rgba(39, 45, 100, 1)), color-stop(90%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 1)));
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#1a315f', GradientType=0);
}

.body-wrap {
  min-height: 700px;
}

.body-wrap {
  position: relative;
  z-index: 0;
}

.body-wrap: before,
.body-wrap: after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 260px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 0)));
  background: linear-gradient(to bottom, rgba(26, 49, 95, 1) 0%, rgba(26, 49, 95, 0) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#001a315f', GradientType=0);
}

.body-wrap:after {
  top: auto;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(26, 49, 95, 0) 0%, rgba(26, 49, 95, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#001a315f', endColorstr='#1a315f', GradientType=0);
}

nav {
  margin-top: 60px;
  box-shadow: 5px 4px 5px #000;
}

Тогда важный бит JavaScript-кода:

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

Чтобы повысить ответ Sudharshan, я переношу это в медиа-запрос, чтобы предотвратить зависание при ширине экрана XS...

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

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

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

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

Здесь вы идете:

.caret {
    display: none !important;
}

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

<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 мкс. Если вам интересно, почему я использую это, это потому, что вам нужно время, чтобы перетащить курсор из кнопки в меню. Когда вы находитесь в меню, время reset, и вы можете оставаться там столько раз, сколько хотите. Когда вы выйдете из меню, мы немедленно скроем меню без какого-либо тайм-аута.

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

Здесь моя техника, которая добавляет небольшую задержку перед закрытием меню после того, как вы перестанете наводить курсор на меню или кнопку переключения. <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);
});

Перезаписать bootstrap.js с помощью этого script.

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') })
});

}); 

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

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

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

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

Самый стандартный ответ:

Потому что, когда вы нажимаете раскрывающийся список, Bootstrap запускает много вещей после клика!

Пример: aria-extended = "false" будет aria-extended = "true". Поэтому вам нужно вызвать щелчок, и он должен быть на ноутбуке или компьютере. Не на планшетах или мобильных телефонах.

И...

$('#your_selector .dropdown').mouseenter(function(event){
    if($(window).width() > 1024) {
        $('.dropdown-toggle', this).trigger('click');
        event.stopPropagation();
    }
});
$('#your_selector .dropdown').mouseleave(function(event){
    if($(window).width() > 1024) {
        $('.dropdown-toggle', this).trigger('click');
        event.stopPropagation();
    }
});

ИЛИ

$('#your_selector .dropdown').mouseenter(function(event){
    if($(window).width() > 768) {
        $('.dropdown-toggle', this).trigger('click');
        event.stopPropagation();
    }
});
$('#your_selector .dropdown').mouseleave(function(event){
    if($(window).width() > 768) {
        $('.dropdown-toggle', this).trigger('click');
        event.stopPropagation();
    }
});

И также используйте это на горизонтальных навигаторах.

Надеюсь, это поможет. Проверьте ссылку https://jsfiddle.net/awb7gfb1/

<nav>
    <div id="menubar" class=" collapse navbar-collapse row">
        <ul id="dropdownNavbar" class="nav navbar-nav">
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-time"></span>
                Time Card
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a id="showTimeCard" href="#">My Time Card</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                    <a href="#">Sub Menu 5</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-stats"></span>
                Project
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-user"></span>
                HR Links
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-screenshot"></span>
                Leave Tracker
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-briefcase"></span>
                Accounts
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                    <a href="#">Sub Menu 5</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-headphones"></span>
                Service Desk
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-file"></span>
                Reports
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                    <a href="#">Sub Menu 5</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-cog"></span>
                Settings
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

И CSS

.dropdown {
    float: left;
    padding-right: 1px;
}

.dropbtn{
    border: 0px;
    height: 30px;
    border-radius: 0px 10px;
}
li button, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
}

li button:hover, .dropdown:hover .dropbtn {
    background-color: #12A5F4;
}

.dropbtn.active {
    background: #12A5F4;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #e8f3f4;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.navbar-header{
    overflow: visible;
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 5px 10px;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #d8dee2
}

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

#menubar{
    padding-top: 5px;
    overflow: visible;
    z-index: 10;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
}

#dropdownNavbar{
    margin: 0px;
}

.navbar-toggle{
    background-color: #3382d5;
}
.navbar-toggle span{
    background-color: white;
}

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

<a class="pretty-button"
   href="#" alt="Notifications"
   onmouseover="$('#notifications-dropdown').click()">
</a>

<a style="display:none"
   id="notifications-dropdown"
   class="js-nav js-tooltip js-dynamic-tooltip"
   href="#"
   alt="Notifications"
   data-toggle="dropdown">
   <span class="fa fa-flag fa-2x"></span>
</a>

Мы видели, В дополнение к ответу от "My Head Hurts", "Cory Price" обнаружили две проблемы:

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

Решение. Удалите элементы "class" и "data-toggle" из ссылки навигации

решение было почти идеальным, но проблема здесь в том, что касается мобильных устройств и планшетов, это не сработает!

Я использую немного кода jQuery, чтобы исправить это.

if ($(window).width() > 769) {
    $('.dropdown-toggle').removeAttr('data-toggle');
    $('.dropdown-menu').removeAttr('style');
    $('.dropdown').removeClass('open');
}
$(window).resize(function () {
    if ($(window).width() > 769) {
        $('.dropdown-toggle').removeAttr('data-toggle');
        $('.dropdown-menu').removeAttr('style');
        $('.dropdown').removeClass('open');
    }
    else {
        $('.dropdown-toggle').attr("data-toggle", "dropdown");
    }
});

Примечание. Здесь мы предполагаем, что сбой на мобильные устройства и планшеты составляет от 768 пикселей.