191问答库 > bootstrap怎么设置下拉菜单不点击，改成鼠标悬停直接显示下拉菜单

bootstrap怎么设置下拉菜单不点击，改成鼠标悬停直接显示下拉菜单

2025-03-10 06:14:59

推荐回答（2个）

回答1：

Bootstrap的下拉菜单一直都是需要点击，才会显示出来，可能不太符合大家的使用习惯，可能有的用户都不知道这个可以点击，国外的一个开发者写了一个插件，能将点击事件切换为Hover鼠标悬停事件，这样节约了用户的操作和时间。

Bootstrap Hover Dropdown是一个非官方的Bootstrap插件，使Bootstrap下拉菜单激活悬停和提供更好的用户体验，当前版本支持最新版的Bootstrap 3，所以不必担心使用兼容的问题。
安装方法

可以下载并解压缩下载包从GitHub。或者，可以下载文件通过鲍尔（JavaScript的包管理系统）：

这也将自动安装Bootstrap和jQuery插件，如果需要。
一旦已经下载的文件，在代码文件最后引入Bootstrap的js文件（S）即可：

使用方法
就像使用Bootstrap一样，可以激活它，没有任何的JavaScript，只要添加一个数据属性，可以让它自动工作。
添加data-hover="dropdown"到标签中，如果已经使用Bootstrap，可以替换Bootstrap的data-toggle="dropdown"。
可以通过数据属性设置选项，也可以通过data-delay和data-close-others来设置选项。这是一个标准的例子：

或者，可以通过JavaScript初始化：
$('.dropdown-toggle').dropdownHover(options);
这没有任何其他配置自启动已经支持此功能菜单也可以。只使用以前使用的标记。只有顶部的标签需要任何特殊标记为我的插件工作。
可选参数
delay: (可选参数) 在毫秒的延迟。这是等待的时间之前关闭下拉当鼠标不再在下拉菜单或按钮/导航项目，激活它。默认值 500。
instantlyCloseOthers: (可选参数) 一个布尔值，如果为真，将立即关闭所有其他下拉菜单的使用当您启动一个新的选择器匹配导航。当你有这么近，可以重叠的很好。默认值 true。
hoverDelay: (可选参数) 开幕前在毫秒的延迟。有些人认为这提高了用户体验，因为它减少了意外的菜单口数量。默认值 0。

回答2：

实际上比较简单，只需要加一个css设置下hover的状态，把下拉菜单设置成block，具体css：
.nav
> li:hover .dropdown-menu {display: block;}

这句css加在bootstrap.min.css之后出现的css中，你试下！