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

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

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

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

Бутстрап 3

Чтобы удалить каретку в версии 3, вам просто нужно удалить HTML из элемента привязки .dropdown-toggle :

  Dropdown  <-- remove this line  

Бутстрап 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; } 

Есть два затяжных вопроса:

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

Решение (1) заключается в удалении элементов «class» и «data-toggle» из навигационной ссылки

  Dropdown   

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

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

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

  

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

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

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

Если у вас есть элемент с dropdown classом, подобным этому (например):

  

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

  

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

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

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

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

Я создал небольшой маленький плагин, который я использовал на нескольких сайтах, и он хорошо работает. Каждый элемент 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'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); }); }); }; - // 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); }); }); }; - // 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 CloseOthers мгновенно закрывает все остальные выпадающие меню, которые открываются при наведении на новый.

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

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

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

См. Сообщение в блоге .

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

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

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

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

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

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

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

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

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

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

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

Пример разметки:

  

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

 $('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; } 

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

  

Это ничего не делает для указательного, хотя …

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

 $('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')}) 

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

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


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

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

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

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

Это скроет

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

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

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

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

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

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

Перезагрузите 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') }) }); }); 

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

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

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

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

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

 Show menu  

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

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

For the caret… I haven’t seen any one specifying simple CSS that totally blocks the caret.

Ну вот:

 .caret { display: none !important; } 
  • Как заполнить выпадающий список json-данными в jquery?
  • Сохранять раскрывающееся окно Bootstrap при нажатии
  • Как сохранить пробелы в DropDownList - представления ASP.NET MVC Razor
  • Выпадающий список ASP.NET MVC из SelectList
  • Html.EnumDropdownListFor: отображение текста по умолчанию
  • Как выбрать / получить раскрывающийся список в Selenium 2
  • Селен WebDriver и DropDown Boxes
  • twitter bootstrap - выпадение нескольких столбцов
  • Поддержка optgroup в выпадающем списке .NET MVC?
  • Выбранное значение для JSP с помощью JSTL
  • Включить / отключить раскрывающийся список в jquery
  • Interesting Posts
    Давайте будем гением компьютера.