下拉菜单 - 前端学习教程_ 前端_前端开发

在前端页面开发的过程中，除了折叠菜单的功能之外，有时还需要实现下拉菜单的功能，下拉菜单的功能与折叠菜单的实现方式类似。下拉菜单的实现思路是当用户单击页面中选项按钮时，页面会展示当前选项下的菜单选项；当用户再次单击页面中的该选项按钮时，页面会自动隐藏当前选项按钮下的菜单选项。在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所示。

图2 初始页面

图2 下拉菜单效果