Bootstrap 中下拉菜单修改成鼠标悬停直接显示 -f

本文将介绍如何将Bootstrap的二级菜单从点击显示改为鼠标悬停显示的方式，这对于许多使用Bootstrap进行网页开发的开发者来说是非常实用的。下面就是两种主要方法的详细介绍。

方法一：通过修改样式表实现

这种方法相对简单，只需要添加一行CSS代码来设置hover状态下的显示方式。具体CSS代码如下：

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

将这行代码添加到Bootstrap.min.css之后的CSS文件中即可。这种方法也存在一些缺点。使用这种方法时，相应的顶级菜单将不可点击。当鼠标悬停在二级菜单上时，顶级菜单的样式会消失。

方法二：利用JQuery实现

这种方法结合了网上的教程，通过使用JQuery中的两个事件来解决这个问题。我们需要关闭click.bs.dropdown.data-api事件，以便使顶级菜单可点击。然后，我们可以使用mouseenter和mouseleave事件来自动展开和关闭二级菜单。具体代码如下：

`$(document).off('click.bs.dropdown.data-api');`

`$('.nav .dropdown').mouseenter(function(){ $(this).addClass('open'); });`

`$('.nav .dropdown').mouseleave(function(){ $(this).removeClass('open'); });`

使用这种方法，不仅可以让顶级菜单保持可点击状态，而且不会丢失样式，最重要的是可以解决Bootstrap的鼠标悬停问题。推荐大家使用这种方法。

将Bootstrap的二级菜单从点击显示改为鼠标悬停显示可以带来更好的用户体验。希望本文的介绍能对大家有所帮助。如果你正在使用Bootstrap进行网页开发，并且遇到了类似的问题，不妨试试这些方法。相信你会发现它们非常实用且有效。