一.手风琴是什么

在前端开发中，框架中的手风琴（Accordion）是一种常见的UI组件，用于创建可折叠的内容面板。它通常由多个面板组成，每个面板包含一个标题和一个可隐藏/展开的内容区域

手风琴面板只有一个面板可以处于展开状态，其他面板处于折叠状态。用户可以点击面板的标题部分，切换面板的展开和折叠状态，以显示或隐藏相应的内容区域
框架中的手风琴通常提供了丰富的配置选项和自定义样式，以适应不同的设计需求和交互行为。它可以用于创建导航菜单、信息折叠、内容面板等各种场景，提供了一种可视化和简洁的方式来展示和切换页面的内容

二.手风琴在什么时候使用（常见使用场景）

1. 导航菜单：
手风琴可以用于创建具有层级结构的导航菜单。每个菜单项可以是一个手风琴面板，展开后显示其子菜单项
2. 内容折叠：
手风琴可以用于在页面中折叠或展开大段内容，以便用户根据需要查看相关信息。这在网页表单、说明文档或用户个人资料等场景中特别有用
3. FAQ页面：
手风琴可以用于创建Frequently Asked Questions（常见问题）页面，其中每个问题是一个手风琴面板。用户可以点击问题标题以展开或折叠问题的答案
4. 展示面板：
手风琴可以用于创建可扩展的展示面板，用于显示不同内容或选项。例如，在产品列表或服务功能中，可以使用手风琴来呈现每个产品或功能的详细信息
5. 折叠侧边栏：
手风琴可以用于创建折叠式侧边栏，以节省页面空间。用户可以点击手风琴面板来展开或折叠侧边栏部分，以显示或隐藏相关内容或功能

三.怎么完成手风琴与数据库的数据交互

效果展示

项目层级

1. 创建数据库：
- 首先，需要使用适当的数据库管理系统（如MySQL、MongoDB等）创建一个数据库，并设计适当的表结构来存储手风琴组件所需的数据【这里使用的是MySQL】

2.编写实体类

package com.wh.entity;public class Accordion {
private String title;
private String aname;
private String ainfo;
private String aimg;public Accordion() {// TODO Auto-generated constructor stub
}public Accordion(String title, String aname, String ainfo, String aimg) {super();this.title = title;this.aname = aname;this.ainfo = ainfo;this.aimg = aimg;
}public String getTitle() {return title;
}public void setTitle(String title) {this.title = title;
}public String getAname() {return aname;
}public void setAname(String aname) {this.aname = aname;
}public String getAinfo() {return ainfo;
}public void setAinfo(String ainfo) {this.ainfo = ainfo;
}public String getAimg() {return aimg;
}public void setAimg(String aimg) {this.aimg = aimg;
}@Override
public String toString() {return "Accordion [title=" + title + ", aname=" + aname + ", ainfo=" + ainfo + ", aimg=" + aimg + "]";
}}

3.工具类
- 实体类，工具类，配置文件等在之前已经全部展示过，在此有不懂的小伙伴，可以点击下方链接查看 👇
  
  LayUi之树形结构的详解（附有全案例代码）http://t.csdn.cn/yvL1t

4.dao层

package com.wh.dao;import java.util.ArrayList;
import java.util.List;import com.wh.entity.Accordion;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;public class AccordionDao extends BaseDao<Accordion>{//查询所有public List< Accordion> list(  Accordion  accordion, PageBean pageBean) throws Exception {String sql="select * from accordion";return super.executeQuery(sql,  Accordion.class, pageBean);}public static void main(String[] args) {AccordionDao a = new AccordionDao();Accordion accordion = new Accordion();try {List<Accordion> list = a.list(accordion, null);System.out.println(list);} catch (Exception e) {e.printStackTrace();}}//	//查询所有
//	public List<TreeVo< Module>> menus(  Module  module, PageBean pageBean) throws Exception {
//		List<TreeVo<Module>> menus = new ArrayList<>();
//		List<Module> list = this.list(module, pageBean);
//		for (Module m : list) {
//			TreeVo<Module> tv = new TreeVo<>();
//			tv.setId(m.getId()+"");
//			tv.setParentId(m.getPid()+"");
//			tv.setText(m.getName());
//			menus.add(tv);
//		}return menus;
//		return BuildTree.buildList(menus, "-1");//-1是顶级节点的id
//	}}

5.servlet

package com.wh.web;import java.util.List;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.wh.dao.AccordionDao;
import com.wh.entity.Accordion;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;public class AccordionAction extends ActionSupport implements ModelDriver< Accordion>{
private  Accordion  accordion = new  Accordion();
private  AccordionDao ad = new  AccordionDao();public void list(HttpServletRequest req, HttpServletResponse resp) {try {List<Accordion> list = ad.list(accordion, null);ResponseUtil.writeJson(resp, list);} catch (Exception e) {e.printStackTrace();}}@Overridepublic  Accordion getModel() {return  accordion;}}

6.jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<html><head><%@include file="common/head.jsp"%><meta charset="utf-8"><title>手风琴案例</title></head><body ><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"><legend>🐻‍❄️童年大回忆🐻‍❄️</legend></fieldset><div class="layui-collapse" lay-accordion=""  id ="accordion"><div class="layui-colla-item"  ><h2 class="layui-colla-title">文豪</h2><div class="layui-colla-content layui-show"><div class="layui-collapse" lay-accordion=""><div class="layui-colla-item"><h2 class="layui-colla-title">唐代</h2><div class="layui-colla-content layui-show"></div></div></div>  </div></div></div><script>layui.use(['element', 'layer'], function(){var element = layui.element;var layer = layui.layer;var  $ = layui.$;$.ajax({url:"accordion.action?methodName=list",dataType:'json',method: 'post',success: function(data) {console.info(data)var content=' ';$.each(data,function(i,n){content+='<div class="layui-colla-item"> ';content+='<h2 class="layui-colla-title">'+n.aname+'</h2> ';content+='<div class="layui-colla-content"><img src="'+n.aimg+'" style="width:64px; height:64px; margin-right:100px;" />'+n.ainfo+'</div> ';content+=' </div>';})$("#accordion").html(content);element.render(); 	}})  //监听折叠element.on('collapse(test)', function(data){layer.msg('展开状态：'+ data.show);});});</script></body>
</html>