Bootstrap教程(25)--折叠面板、折叠面板导航

谁借莪１个温暖的怀抱￠ 2022-11-07 11:42 181阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 概述
 *  2. 折叠面板
 *  3. 折叠面板导航
 *  4. 小结

# 1. 概述 #

上一篇我们讲述了折叠插件的用法，可以将任意的div元素包含的内容进行动态的折叠/显示操作。

本篇来讲述折叠中的两个特例，即折叠面板、折叠面板导航。

# 2. 折叠面板 #

折叠面板是将折叠效果应用于多个面板，从而在某一时间至多显示其中一个面板的控件。

折叠面板实现稍微有些复杂，接下来我们来详细描述下：

第1步，我么定义折叠面板div元素，并为其命名，需要特别注意`panel-group`类，表示多个面板的集合，即我们要创建的折叠面板。

第2步，添加第一个面板的头部，注意头部包含折叠按钮，根据我们对折叠按钮的理解，当点击折叠按钮时，id为`poem`的元素会切换显示状态。另外还需要注意使用`data-parent`属性关联到父元素。

第3步，添加折叠部分，通过`panel-collaspse`设置面板，通过`collapse in`将元素设置为折叠元素且默认显示(`in`)。

第4步，添加第二个面板，注意其折叠部分默认不显示，即不添加`in`类。

<div class="panel-group" id="panel-container">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-title h4">
                                    <a data-toggle="collapse" data-parent="#panel-container" href="#poem1">春晓</a>
                                </div>
                            </div>
                            <div id="poem1" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-title h4">
                                    <a data-toggle="collapse" data-parent="#panel-container" href="#poem2">鹅</a>
                                </div>
                            </div>
                            <div id="poem2" class="panel-collapse collapse">
                                <div class="panel-body">
                                    鹅鹅鹅，曲项向天歌。白毛浮绿水，红掌拨清波。
                                </div>
                            </div>
                        </div>
                    </div>

这样就可以了，具体效果如下：  
![在这里插入图片描述][20210311213200950.png_pic_center]

# 3. 折叠面板导航 #

在折叠面板中，还有一个比较常用的存在，即折叠面板的导航。默认情况下菜单可以折叠，当点击时弹出其子菜单。

只需要将panel-body部分替换为list-group列表组即可。

具体效果如下：  
![在这里插入图片描述][20210311213340230.png_pic_center]

# 4. 小结 #

折叠面板、折叠面板导航综合之前折叠插件、面板插件、列表组相关的技术，还是比较难的。

但是其实大家无需死记硬背，再使用时临时上网查询其用法即可，拿来修改即用。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[20210311213200950.png_pic_center]: /images/20221023/970a8bfe898a49cd991e2f0299f4ede3.png
[20210311213340230.png_pic_center]: /images/20221023/4b889f8099ba4174bf5ea0eba4bcb349.png