手风琴折叠效果 - jQuery UI accordion
在最近几天的实习过程中，有一个需求是从数据库中获取所有的历史数据表格并显示在浏览器页面上，但是因为历史数据过多，全部显示影响了页面的美观且不易查找。通过上网查找资料，我发现了jQuery中一个极其好用的折叠面板部件-accordion。
下面是我实现的效果：
1、折叠内容
accordion组件预设情况下总有一项内容是展开的，当点击其他部分的标题，该部分内容可见，但无法将所有内容都折叠起来，如果要支持所有部分都可以折叠，可以通过配置collapsible属性。
$(function() {
$( "#accd" ).accordion({
collapsible: true
});
});2、自定义图标
通过 icons 选项自定义标题图标，icons 选项接受标题默认和打开状态的 class。使用 UI CSS 框架中的任意 class，或者使用背景图像创建自定义的 class。
常见的自定义图标
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e", //默认值ui-icon-triangle-1-e
activeHeader: "ui-icon-circle-arrow-s" //默认值ui-icon-triangle-1-s
};
$( "#accd" ).accordion({
icons: icons,
});
$( "#toggle" ).button().click(function() {
if ( $( "#accd" ).accordion( "option", "icons" ) ) {
$( "#accd" ).accordion( "option", "icons", null );
} else {
$( "#accd" ).accordion( "option", "icons", icons );
}
});
});3、滑鼠移动式自动打开内容
默认情况下，打开 accordion 某个部分内容，是点击该部分标题，如果需要实现移动滑鼠到该部分自动展开内容，可以设置 event 属性，例如：
$(function () {
$("#accd").accordion({
event: "mouseover"
});
});4、在jQuery代码段中需要引入
5、一个简单的关于实现折叠效果的例子
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
//以下四个脚本必须引入
<link rel="stylesheet" href="assets/jquery-ui.min.css">
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js">script>
<script src="assets/jquery-ui.min.js">script>
<link rel="stylesheet" href="assets/style.css">
<script>
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$( "#accd" ).accordion({
icons: icons,
});
$( "#toggle" ).button().click(function() {
if ( $( "#accd" ).accordion( "option", "icons" ) ) {
$( "#accd" ).accordion( "option", "icons", null );
} else {
$( "#accd" ).accordion( "option", "icons", icons );
}
});
});
script>
head>
<body>
<div id="accd">
<h3>Part oneh3>
<div>
<p>ccccccccp>
div>
<h3>Part twoh3>
<div>
<p>ccccccccp>
div>
<h3>Part threeh3>
<div>
<p>ccccccccp>
<ul>
<li>1.ccccccccli>
<li>2.ccccccccli>
<li>3.ccccccccli>
ul>
div>
<h3>Part fourh3>
<div>
<p>ccccccccp>
div>
div>
body>
html>参考资料：
http://www.w3school.com.cn/jquery/jquery_hide_show.asp
http://www.runoob.com/jqueryui/api-accordion.html
http://wiki.jikexueyuan.com/project/jquery-tutorial/jquery-ui-accordion-example.html
https://www.runoob.com/jqueryui/example-accordion.html
http://www.jb51.net/article/72290.htm