Jquery-UI—制作可折叠面板（accordion）

最新推荐文章于 2024-08-14 13:53:33 发布

Tiramisu_C

最新推荐文章于 2024-08-14 13:53:33 发布

阅读量3k

点赞数 2

分类专栏： Jquery-UI Jquery-UI学习之路文章标签： jquery html Jquery-UI 可折叠面板 Js可折叠面板

本文链接：https://blog.csdn.net/nongweiyilady/article/details/53547260

版权

本文介绍了如何利用Jquery-UI简单快速地创建可折叠面板。首先需要引入jquery和jquery-ui的文件，注意jquery-ui应放在jquery之后。然后通过编写HTML布局，用div包裹面板，并使用h2作为触发折叠的元素。内容区域则放在h2下方的div中。在DOM加载完成后，通过选择器获取面板并调用accordion()方法，即可实现面板的折叠效果。完整示例代码可在作者的GitHub仓库中找到。

摘要由CSDN通过智能技术生成

先来看一下效果：

使用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&