本文介绍如何使用jQuery UI库中的accordion插件来实现在网页上创建可折叠的区域，通过简单的HTML结构和JavaScript代码，可以轻松地为用户提供更好的交互体验。
accordion 参数说明：http://blog.csdn.net/smeyou/article/details/6752469
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用accordion插件实现页面中多区域的折叠操作</title>
<script type="text/javascript" src="lib/jquery-2.1.1.js"></script>
<script type="text/javascript" src="lib/jquery-ui.js"></script>
<style type="text/css">
body{font-size:13px}
.divFrame{width:500px;}
.divFrame h3{padding:5px;font-size:12px;border:solid 1px #ccc;background-color:#eee}
.divFrame .divOpt{padding:5px;border:solid 1px #eee}
</style>
<script type="text/javascript">
$(function(){
$("#accordion").accordion();
})
</script>
</head>
<body>
<div class="divFrame">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div class="divOpt">
<p>Item 1</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div class="divOpt">
<p>Item 2</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div class="divOpt">
<p>Item 3</p>
</div>
<h3><a href="#">Section 4</a></h3>
<div class="divOpt">
<p>Item 4</p>
</div>
</div>
</div>
</body>
</html>
扫一扫
1485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
