Как сделать раскрывающееся меню Twitter Bootstrap, а не щелчком

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

+1135
источник поделиться
42 ответа
  • 1
  • 2

Я создал раскрывающееся меню с чистым потоком на основе последней (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>

Демо

+573
источник

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

+905
источник
другие ответы

Связанные вопросы


Похожие вопросы

В дополнение к ответу от "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;
}
+228
источник

Я использовал немного 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();
});
+127
источник

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

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

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

+69
источник

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

.dropdown:hover .dropdown-menu {
   display: block;
}
+68
источник

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

+22
источник

[Обновить] Плагин находится на 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

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

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

+20
источник

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

.dropdown:hover .dropdown-menu {
    display: block;
}
+15
источник

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

.dropdown:hover .dropdown-menu {
display: block;
}
+14
источник

Еще лучше с 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');
});
+10
источник

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

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});
+9
источник

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

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

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

+8
источник

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

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});
+8
источник

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

;(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>
+7
источник

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

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

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

+7
источник

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

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

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

+5
источник

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

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

.nav .dropdown-menu {
    margin-top: 0;
}
+5
источник

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

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


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

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

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

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

+5
источник

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

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

+4
источник
$('.dropdown').hover(function(e){$(this).addClass('open')})
+4
источник

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

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}
+3
источник

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

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}
+3
источник

Решение 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;
    }
}
+3
источник

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

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}
+2
источник

Перезаписать 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') })
});

}); 
+2
источник

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

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

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

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

+2
источник

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

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

.caret {
    display: none !important;
}
+2
источник

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

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

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

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

+2
источник
  • 1
  • 2

Посмотрите другие вопросы по меткам или Задайте вопрос