Web开发

[Bootstrap]Bootstrap 鼠标hover触发dropdown-toggle

使用 bootstrap-hover-dropdown 插件

1. 下载 bootstrap-hover-dropdown

下载地址：http://www.bootcdn.cn/bootstrap-hover-dropdown/

当然，你也可以直接使用CDN版本。

2. 引入 bootstrap-hover-dropdown.js

在你的HTML文件中，确保引入了bootstrap-hover-dropdown.js。通常，你可以将其放在页面底部的<script>标签中：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Hover Dropdown Example</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 你的内容 -->

    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- 引入Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- 引入bootstrap-hover-dropdown.js -->
    <script src="path/to/bootstrap-hover-dropdown.js"></script>
</body>
</html>

3. 修改HTML中的Dropdown

找到你的HTML文件中包含dropdown-toggle类的元素，并进行如下修改：

1

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>

修改为：

1

<a href="#" class="dropdown-toggle" data-hover="dropdown" data-close-others="true">Dropdown</a>

你还可以添加一个参数data-delay="1000"，它表示下拉列表的消失延迟时间（默认是500毫秒）。例如：

1

<a href="#" class="dropdown-toggle" data-hover="dropdown" data-close-others="true" data-delay="1000">Dropdown</a>

4. 取消延迟

如果你希望完全取消延迟，可以直接修改bootstrap-hover-dropdown.js文件中的配置，将delay: 500改为delay: 0。

找到并修改如下代码：

1

delay: 500

改为：

1

delay: 0

这样就可以取消掉下拉菜单的延迟时间。