折叠面板

开发工具与关键技术：VS Bootstrap 中的 Collapse
作者：微凉之夏
撰写日期：2019年06月14日

在Bootstrap的折叠面板的插件允许你在网页中用一点点JavaScript以及css类的切换内容，控制内容的可见性，它是个灵活的插件，使用少量的类，以便切换行为。一般的面板通常是指一个独立的容器，而折叠面板则是能有效的节省页面的可是面积，非常适合用于：QA说明和帮助文档等等。如下示例：

其中用了.collapse隐藏内容、.collapsing 带动态效果的切换、.collapse.show 显示内容，你也可以使用带href属性的连接、或者带data-target属性的按钮来创建折叠面板效果，在这两种情况下data-toggle=“collapse” 属性都是必须要的，其效果如下：

刚做好的效果是左边的那个，看起来跟按钮没多大差别是吧，不过呢当你点击它的时候会显示出它们所包含的内容就会显示出来给大家看，就像你做项目时不是有新增或修改的吗？是不是都需要按钮啊，每当你写好所对应的代码时你点击它，它就会弹出模态框一样。
还有一种手风琴折叠范例是结合card卡片组件使用卡片是一个灵活的、可扩展的内容窗口，同时可以做出多种展示效果变体），可以扩展折叠组件为风琴效果的，代码如下：下面我只给出其中的一个代码，其它两个的是和第一个相同（方法的使用都是一模一样的，你只要改你所要的显示出来的内容就可以了），在下图可以看出首先是用一个大的容器来包囊着其它所需的内容，card卡片中呢又包含着两部分一是card-header为头部（显示的相当于是标题），而第二部分则是card-body为内容区（显示的是你所写的内容）。

效果如下：

也是当你点击第一个时它就会显示出它里面的内容，点击第二个时第一个就隐藏收起来第二个就显示出来，同样的你如果想把第三个显示出来的话那么第二就会自动的隐藏起来。你也可以使用自定义样式创建手风琴效果，只要添加data-children属性，并指定一组相邻元素来切换（如：.item），然后使用以上述相同的属性和class，来切换/隐藏器相关联内容。
其实还有很多折叠面板的比如：多目标控制（就是可以在或者标签上，通过用JQuery选择器来显示和隐藏多个元素（或者多个、元素来控制显示和隐藏用一个元素））等等。