学科分类

下拉菜单

在前端页面开发的过程中,除了折叠菜单的功能之外,有时还需要实现下拉菜单的功能,下拉菜单的功能与折叠菜单的实现方式类似。下拉菜单的实现思路是当用户单击页面中选项按钮时,页面会展示当前选项下的菜单选项;当用户再次单击页面中的该选项按钮时,页面会自动隐藏当前选项按钮下的菜单选项。在Bootstrap中为我们提供了下拉菜单的功能,下面通过例6-1演示下拉菜单的实现方式。

【例6-1】

创建C:\Bootstrap\chapter06\demo10.html文件,具体代码如下。

1  <!DOCTYPE html>
2  <html>
3  <head>
4   <meta charset="UTF-8">
5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6   <title>Document</title>
7   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
8   <script src="jquery-3.2.1.min.js"></script>
9   <script src="bootstrap/js/popper.min.js"></script>
10  <script src="bootstrap/js/bootstrap.min.js"></script>
11 </head>
12 <body>
13  <!-- 下拉菜单 -->
14  <div class="dropdown">
15   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
16    菜单
17   </button>
18   <div class="dropdown-menu">
19    <a class="dropdown-item" href="#">菜单1</a>
20    <a class="dropdown-item" href="#">菜单2</a>
21    <a class="dropdown-item" href="#">菜单3</a>
22   </div>
23  </div>
24 </body>
25 </html>

上述代码中,在第7~10行代码中除了引入bootstrap.min.css文件、jquery-3.2.1.min.js和bootstrap.min.js文件之外,在实现下拉菜单功能时,还需要第9行代码引入popper.min.js文件;第14行代码定义类名为.dropdown的div元素,定义下拉菜单最外层结构;第15~17行代码在.dropdown中定义按钮的id属性的值为dropdownMenuButton;并设置data-toggle的值为“dropdown”;为按钮添加类名.btn、.btn-secondary和.dropdown-toggle,其中.dropdown-toggle表示向下箭头;第18~22行代码定义选项菜单列表,首先定义类名为.dropdown-menu的最外层div元素,然后在.dropdown-menu的内部定义类名为.dropdown-item的a标签来实现下拉菜单列表中的每一个菜单选项。

在浏览器中打开demo10.html,运行结果如图1和图2所示。

image-20200702185713800

图2 初始页面

image-20200702185724601

图2 下拉菜单效果

点击此处
隐藏目录