1. 概述

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

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

2. 折叠面板

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

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

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

<div class="panel-group" id="panel-container">
</div>

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

                 <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>

第3步，添加折叠部分，通过panel-collaspse设置面板，通过collapse in将元素设置为折叠元素且默认显示(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>

第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>

这样就可以了，具体效果如下：

3. 折叠面板导航

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

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

             <div class="panel-group" id="main-menu"><div class="panel panel-default"><div class="panel-heading"><div class="panel-title h4"><a data-toggle="collapse" data-parent="#main-menu" href="#menu1">菜单1</a></div></div><div id="menu1" class="panel-collapse collapse in"><ul class="list-group"><li class="list-group-item">菜单1-1</li><li class="list-group-item">菜单1-2</li></ul></div></div><div class="panel panel-default"><div class="panel-heading"><div class="panel-title h4"><a data-toggle="collapse" data-parent="#main-menu" href="#menu2">菜单2</a></div></div><div id="menu2" class="panel-collapse collapse"><ul class="list-group"><li class="list-group-item">菜单2-1</li><li class="list-group-item">菜单2-2</li></ul></div></div></div>

具体效果如下：

4. 小结

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

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

零基础Bootstrap入门教程(25)--折叠面板、折叠面板导航相关推荐

零基础Bootstrap入门教程(0)--教程背景与目录
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
零基础Bootstrap入门教程(16)--模态框
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 模态框样式 3. 按钮直接关联模态框 4. 通过JS方法打开/关闭模态框 5. 调整大小 6. 动画效果 7. 小结 1. 概述模态框 ...
零基础Bootstrap入门教程(26)–轮播的实现
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 基本轮播 3. 添加轮播指示器 4. 添加轮播控件 5. 小结 1. 概述要想从头到尾来实现一个比较好看且稳定的轮播控件,还是有一定难 ...
零基础Bootstrap入门教程(4)--开发标准的响应式网页
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 创建标准HTML5页面 3. 添加响应式内容 4. 小结 1. 背景响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页, ...
零基础Bootstrap入门教程(9)--使用表单控件
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 基本输入控件 3. 调整表单控件的大小 4. 表单控件的特殊用法 4.1 单选框用法 4.2 复选框用法 5. 小结 1. 概述表单控 ...
零基础SSM入门教程(0)--教程背景与目录
点此查看零基础JavaWeb全栈文章目录及源码下载 1. 背景本教程的出发点是写一个比较条理,比较全面的SSM系列教程,首先造福自己.理顺自己的知识体系,然后也造福大众,因为网上现存的资源相对比较 ...
【PR】零基础快速入门教程
[PR]零基础快速入门教程 PR(Premiere)能做什么? PR欢迎界面及新建项目工作区及窗口说明导入文件建立序列视频剪辑添加字幕导出视频使用软件:Premiere2020 新年卷起 ...
零基础CSS入门教程(1)–初识CSS
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...

零基础Bootstrap入门教程(25)--折叠面板、折叠面板导航

本文目录

1. 概述

2. 折叠面板

3. 折叠面板导航

4. 小结

零基础Bootstrap入门教程(25)--折叠面板、折叠面板导航相关推荐

最新文章

热门文章