在使用Bootstrap做前端网页开发时,如何实现当鼠标悬停在Bootstrap的下拉菜单(dropdown)时自动显示菜单项,而不需要点击下拉菜单的标题才展示菜单项呢?
Rector
2020-05-11 提问
在Bootstrap 3 中,可以通过设置下拉菜单的CSS样式来实现,如下:
.dropdown:hover .dropdown-menu { display: block; }
2020-05-09 回答
使用jQuery实现的方式,如下:
jQuery('ul.nav li.dropdown').hover(function() { jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(); }, function() { jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(); });
另一种使用jQuery实现的方式,如下:
$(function() { $(".dropdown").hover( function(){ $(this).addClass('open') }, function(){ $(this).removeClass('open') } ); });
使用jQuery调用dropdown()方法的实现,如下:
dropdown()
$(".nav .dropdown").hover(function() { $(this).find(".dropdown-toggle").dropdown("toggle"); });
码龄: 3125天
专注.NET/.NET Core