您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
一位不愿透露姓名的用户 发布于2022年01月14日 19:14 最近更新于 2022年01月14日 20:54

Bootstrap 下拉菜单 dropdown menu 如何在鼠标滑过 hover 时显示

2197 次浏览 读完需要≈ 4 分钟 Bootstrap

我想要基于 Bootstrap v3.4.1 实现一个下拉菜单,主要代码如下:

<!-- 引入 bootstrap.min.css -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<!-- 引入 bootstrap.min.js(前面还需要引入 jQuery) -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>

<div class="dropdown">
	<a id="platformMenu" href="#" data-toggle="dropdown" data-target="#" aria-haspopup="true" aria-expanded="false">
		平台管理
		<span class="caret"></span>
	</a>
	<ul class="dropdown-menu" aria-labelledby="platformMenu">
		<li role="company"><a href="/company/list">企业管理</a></li>
		<li role="site"><a href="/site/list">场地管理</a></li>
		<li role="workspace"><a href="/workspace/list">工作空间管理</a></li>
		<li role="device"><a href="/device/list">设备管理</a></li>
	</ul>
</div>

但是,这样只能实现当鼠标点击【平台管理】菜单时,才会显示下拉菜单。

我想实现:当鼠标滑过(hover)该菜单时,就自动显示对应的下拉菜单。

不过,我查了下,Boostrap官方貌似没有提供这样的 API。

请问各路大神,我该如何实现当鼠标滑过(hover)该菜单时,就能够自动显示对应的 Boostrap 下拉菜单 ?

1 个回答

Ready · 2年前

方法一

请先为你第6行代码中的class属性额外添加hoverclassName,即:<div class="dropdown hover">

然后在CSS文件(或<style>标签中)中添加如下CSS代码即可:

 .dropdown.hover:hover .dropdown-menu {
     display: block;
     margin-top: 0;
 }

方法二

当然,也可以使用JavaScript代码来实现:

$('.dropdown').hover(function(){ 
  $(this).trigger('click'); 
});
已采纳 ? 0 0 0 编辑

撰写答案