本文介绍了如何利用Jquery-UI简单快速地创建可折叠面板。首先需要引入jquery和jquery-ui的文件，注意jquery-ui应放在jquery之后。然后通过编写HTML布局，用div包裹面板，并使用h2作为触发折叠的元素。内容区域则放在h2下方的div中。在DOM加载完成后，通过选择器获取面板并调用accordion()方法，即可实现面板的折叠效果。完整示例代码可在作者的GitHub仓库中找到。
先来看一下效果：
使用jquery-ui制作如可折叠选项卡非常简单：
第一步：引入 jquery 和 jquery-ui 文件。
注 jquery-ui 要放在jquery引入之后。因为要引入自己的外部样式文件和脚本文件，以下是我的head部分代码。
<head>
<meta charset="UTF-8">
<title>可折叠面板</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="../jquery-1.8.3.js&
最低0.47元/天 解锁文章
扫一扫
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
