带有hover的引导程序下拉菜单

好的,所以我需要的是相当简单的。

我已经设置了一个导航栏,其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown" ),它工作正常。

事情是“ onClick ”的作品,而我宁愿如果它的工作“ onHover ”。

有没有内置的方法来做到这一点?

最简单的解决scheme将在CSS中。 添加像…

 .dropdown:hover .dropdown-menu { display: block; margin-top: 0; // remove the gap so it doesn't close } 

工作小提琴

做到这一点的最好方法就是触发带有hover的引导点击事件。 这样,它仍然应该保持触摸设备友好

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

你可以使用jQuery的hoverfunction。

你只需要在鼠标进入时添加open的类,并在鼠标离开下拉菜单时删除该类。

这是我的代码:

 $(function(){ $('.dropdown').hover(function() { $(this).addClass('open'); }, function() { $(this).removeClass('open'); }); }); 

一个简单的方法,使用jQuery,是这样的:

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

对于CSS,当你点击它时,它也会变得疯狂。 这是我正在使用的代码,它也不会为移动视图更改任何内容。

 $('.dropdown').mouseenter(function(){ if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view if(!$(this).hasClass('open')) { // Keeps it open when hover it again $('.dropdown-toggle', this).trigger('click'); } } }); 

在Twitter Bootstrap 没有实现,但你可以使用这个插件

更新1:

同样的问题在这里

将鼠标hover在导航项上,看看它们是否在hover状态下激活。 http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

所以你有这个代码:

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

通常它在点击事件上工作,并且你希望它在hover事件上工作。 这很简单,只需使用这个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(); }) }) }) 

这工作得很好,这里是解释:我们有一个button和一个菜单。 当我们将鼠标hover在button上时,我们显示菜单,当鼠标hover时,我们会在100ms后隐藏菜单。 如果您想知道为什么我使用它,是因为您需要时间从菜单上的button拖动光标。 当你在菜单上,时间被重置,你可以留在那里尽可能多的时间。 当您退出菜单时,我们会立即隐藏菜单,而不会超时。

我在很多项目中使用过这个代码,如果遇到任何问题,请随时提问。

这是我用它来下拉hover与一些jQuery

 $(document).ready(function () { $('.navbar-default .navbar-nav > li.dropdown').hover(function () { $('ul.dropdown-menu', this).stop(true, true).slideDown('fast'); $(this).addClass('open'); }, function () { $('ul.dropdown-menu', this).stop(true, true).slideUp('fast'); $(this).removeClass('open'); }); }); 

当您不在移动设备上时,这只会徘徊在导航栏上,因为我发现在移动设备上hover导航并不适用:

  $( document ).ready(function() { $( 'ul.nav li.dropdown' ).hover(function() { // you could also use this condition: $( window ).width() >= 768 if ($('.navbar-toggle').css('display') === 'none' && false === ('ontouchstart' in document)) { $( '.dropdown-toggle', this ).trigger( 'click' ); } }, function() { if ($('.navbar-toggle').css('display') === 'none' && false === ('ontouchstart' in document)) { $( '.dropdown-toggle', this ).trigger( 'click' ); } }); }); 

我尝试其他解决scheme,我使用引导3,但下拉菜单closures得太快,无法移动

假设你添加class =“dropdown”给li,我添加了一个超时

 var hoverTimeout; $('.dropdown').hover(function() { clearTimeout(hoverTimeout); $(this).addClass('open'); }, function() { var $self = $(this); hoverTimeout = setTimeout(function() { $self.removeClass('open'); }, 150); }); 

试试这个使用hoverfunction与淡入淡出animation

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

这将帮助你做自己的hover类的引导:

CSS:

 /* Hover dropdown */ .hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/ .hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/ .hover_drop_down:hover ul.dropdown-menu{ display: block; } 

边距设置为避免不必要的closures,它们是可选的。

HTML:

 <div class="btn-group hover_drop_down"> <button type="button" class="btn btn-default" data-toggle="dropdown"></button> <ul class="dropdown-menu" role="menu"> ... </ul> </div> 

不要忘了删除button属性data-toggle =“下拉”,如果你想删除onclick打开,这也将工作时,input是附加下拉。

  $('.navbar .dropdown').hover(function() { $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150); }, function() { $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105) }); 

更新了一个适当的插件

我已经发布了一个适当的下拉hoverfunction插件,在这个插件中你甚至可以定义点击dropdown-toggle元素时会发生什么:

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


为什么我做到了,什么时候有很多解决scheme?

我以前所有的解决scheme都存在问题。 简单的CSS不会在.open使用.open类,因此当下拉菜单可见时,下拉切换元素将不会有任何反馈。

js的人正在干扰点击.dropdown-toggle ,所以下拉菜单显示在hover,然后点击打开的下拉菜单时隐藏它,移出鼠标将触发下拉列表再次显示。 一些JS解决scheme正在制定iOS的兼容性,一些插件不支持触摸事件的现代桌面浏览器。

这就是为什么我做了Bootstrap Dropdown Hover插件,通过使用标准的Bootstrap JavaScript API来防止所有这些问题,没有任何破解。

使用hover触发click事件有一个小错误。 如果mouse-in ,然后click创build反之亦然的效果。 它在mouse-outopensmouse-out opensclose 。 更好的解决scheme:

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

我build议的解决scheme检测,如果它不触摸设备,并且navbar-toggle (汉堡包菜单)不可见,并使父菜单项显示hover子菜单上 ,并按照其点击链接

也使margin-top 0,因为在某些浏览器的导航栏和菜单之间的差距不会让你hover到子项目

 $(function(){ function is_touch_device() { return 'ontouchstart' in window // works on most browsers || navigator.maxTouchPoints; // works on IE10/11 and Surface }; if(!is_touch_device() && $('.navbar-toggle:hidden')){ $('.dropdown-menu', this).css('margin-top',0); $('.dropdown').hover(function(){ $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); }); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <ul id="nav" class="nav nav-pills clearfix right" role="tablist"> <li><a href="#">menuA</a></li> <li><a href="#">menuB</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a> <ul id="products-menu" class="dropdown-menu clearfix" role="menu"> <li><a href="">A</a></li> <li><a href="">B</a></li> <li><a href="">C</a></li> <li><a href="">D</a></li> </ul> </li> <li><a href="#">menuD</a></li> <li><a href="#">menuE</a></li> </ul>