手风琴(折叠面板)

时间:2024-03-20 16:39:41

先看下效果图:
手风琴(折叠面板)

一、Layui手风琴

Layui手风琴官方链接:https://www.layui.com/doc/element/panel.html

1.1 引用layui的css和js

想使用layui的手风琴,需先引用layui的css和js,可去官网下载

1.2 开启手风琴的代码示例

下图是layui开启手风琴的代码示例
手风琴(折叠面板)

class=“layui-collapse” class=“layui-colla-item” class=“layui-colla-title” class=“layui-colla-content”
这四个class都是固定写法,是layui框架提供

如果想显示动态数据,可使用vue循环取值,涉及语法:v-for循环和{{}}取值

1.3 静态数据

静态数据如图
手风琴(折叠面板)

1.4 最终效果图

手风琴(折叠面板)

二、Bootstrap手风琴

Bootstrap手风琴官方链接 https://v3.bootcss.com/javascript/#collapse
手风琴(折叠面板)

2.1 引用Bootstrap的css和js

想使用Bootstrap的手风琴,需先引用Bootstrap的css和js,还需引用jquery、注:必须先引用jquery,再引用Bootstrap的js
手风琴(折叠面板)

2.2 开启手风琴的代码示例

下图是Bootstrap开启手风琴的代码示例
手风琴(折叠面板)

2.3 最终效果图

手风琴(折叠面板)