您的位置：首页 > Web前端 > JQuery

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

2016-12-09 23:11 471 查看
先来看一下效果：



使用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"></script>
    <script type="text/javascript" src="../jquery-ui-1.9.2.custom.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>


第二步：写面板布局。

使用一个div来包裹我们的面板，这里给他一个id ="panel"，h2是我们点击时面板伸缩和折叠，h2下方的div是当点击h2时面板展示的内容。样式可以自己加成想要的效果。这里为了区分我简单加入“面板内容1”等文本。

<body>
<div id="panel">
<h2>标题1</h2>
<div>
面板1内容
</div>

<h2>标题2</h2>
<div>
面板2内容
</div>

<h2>标题3</h2>
<div>
面板3内容
</div>
</div>
</body>

第三步：编写脚本。

这里我们同样要在dom加载完成之后开始运行我们的代码，选取到面板之后，使用jquery-ui中的 accordion() 方法即可实现可折叠面板功能。

$(function(){
$("#panel").accordion();
})


示例代码地址：https://github.com/nongweiyi/csdnBlogProjects/tree/master/Jquery-UI/panel

您可以在这里下载Jquery库：https://github.com/nongweiyi/csdnBlogProjects/tree/master/Jquery-UI/libs
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery html Jquery-UI 可折叠面板 Js可折叠面板
相关文章推荐
新的分享
章节导航