折叠菜单 - 前端学习教程_ 前端_前端开发

折叠菜单是前端页面中常用的功能模块，例如通过折叠菜单实现商品信息的展示与隐藏等。折叠菜单功能的实现思路很简单，当用户单击页面中选项菜单时，页面会展示当前选项下的内容信息；当再次单击选项菜单时，页面会自动隐藏当前选项下的内容信息。

下面通过例6-1演示折叠菜单的实现方式。

【例6-1】

创建C:\Bootstrap\chapter06\demo09.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/bootstrap.min.js"></script>
10 </head>
11 <body>
12  <!-- a超链接方式 -->
13  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
14   iPhone11 pro
15  </a>
16  <!-- 手机详细信息 -->
17  <div class="collapse" id="collapseExample">
18   <div class="card card-body">
19    iPhone爆品限时特惠！大额神券抢购中！iPhone11Pro立减1200元，XR64GB黄色低至3899元
20   </div>
21   <div class="card card-body">
22    iPhone爆品限时特惠！大额神券抢购中！iPhone11Pro立减1200元，XR64GB黄色低至3899元
23   </div>
24   <div class="card card-body">
25    iPhone爆品限时特惠！大额神券抢购中！iPhone11Pro立减1200元，XR64GB黄色低至3899元
26   </div>
27  </div>
28 </body>
29 </html>

上述代码中，第7行代码引入bootstrap.min.css文件；第8行代码引入jquery-3.2.1.min.js文件；第9行代码引入bootstrap.min.js文件；第13~15行代码定义a标签，设置data-toggle属性值为collapse，表示折叠菜单；设置href的属性值为“#collapseExample”，即hash值，表示与id值为“collapseExample”页面结构绑定；设置role的值为button，表示按钮角色；第17~27行代码定义类名为collapse的div元素，表示要折叠的内容信息，定义id的值为“collapseExample”。在.collapse中定义类名为card、card-body的div元素，表示折叠菜单中卡片中的内容信息。

在浏览器中打开demo09.html文件，运行结果如图1所示。

图1 初始页面

单击“iPhone11 pro”按钮，页面效果图如2所示。

图2 展开菜单

修改demo09.html，具体代码如下。

<!-- 按钮方式 -->
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
iPhon11 pro
</button>

上述代码中，将demo09.html中的a标签修改button标签，然后，将href修改为data-target，并设置data-target的值为“#collapseExample”，同样可以实现折叠菜单的页面功能。