使用jQuery实现顺滑折叠面板

最新推荐文章于 2026-05-10 05:22:05 发布

原创最新推荐文章于 2026-05-10 05:22:05 发布 · 5.9k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jQuery

jQuery 专栏收录该内容

1 篇文章

订阅专栏

博客讲述了在使用jQuery UI的折叠面板Accordion时遇到的嵌套使用问题，即最外层折叠面板展开时子内容无法完全显示。作者通过在CSS中设置height: auto!important解决了内容显示问题，但导致动画效果失效。为了解决这一问题，作者决定使用jQuery自行编写折叠面板的动画效果，提供了自定义的顺滑折叠代码。

jQuery UI有折叠面板框架Accordion，但是我在使用这个框架的时候发现嵌套使用时会出现问题：最外层折叠面板从第二个开始展开时子内容无法完全显示，代码的height被置为了0 。我在CSS中将折叠面板的height强制设置为auto，即height: auto!important; 后可以解决完全显示的问题。但是，jQuery UI的折叠动画是基于改变其height值实现收起展开效果的，我强制设置height:auto后这一动画就被废掉了，展开收起的过程十分难看。最后我决定自己用jQuery写一个折叠面板效果，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1dmht87fc8dm42t9.css" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.wrap{
				width: 200px;
			}
			.accordion{
				padding: 10px;
			}
			.accordion>p{
				background: #ccc;
				color: #333;
				padding: 0 10px;
				line-height: 26px;
				margin-top: 5px;
			}
			.accordion>p.active{
				background: blue;
				color: #fff;
			}
			.accordion>p em{
				margin-right: 10px;
			}
			.accordion>div, .accordion>ul{
				border: 1px solid blue;
				display: none;
			}
			.accordion>ul{
				list-style: none;
			}
			.accordion>ul li{
				padding: 0 10px;
				line-height: 26px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="accordion">
				<p><em class="iconfont icon-add"></em>Head1</p>
				<div class="accordion">
					<p><em class="iconfont icon-add"></em>Sub Head1</p>
					<ul>
						<li>Item1</li>
						<li>Item2</li>
						<li>Item3</li>
						<li>Item4</li>
						<li>Item5</li>
					</ul>
					<p><em class="iconfont icon-add"></em>Sub Head2</p>
					<ul>
						<li>Item1</li>
						<li>Item2</li>
						<li>Item3</li>
						<li>Item4</li>
						<li>Item5</li>
					</ul>
				</div>
				<p><em class="iconfont icon-add"></em>Head2</p>
				<div class="accordion">
					<p><em class="iconfont icon-add"></em>Sub Head1</p>
					<ul>
						<li>Item1</li>
						<li>Item2</li>
						<li>Item3</li>
						<li>Item4</li>
						<li>Item5</li>
					</ul>
					<p><em class="iconfont icon-add"></em>Sub Head2</p>
					<ul>
						<li>Item1</li>
						<li>Item2</li>
						<li>Item3</li>
						<li>Item4</li>
						<li>Item5</li>
					</ul>
				</div>
			</div>
		</div>
		
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(".accordion>p").click(function(){
				if($(this).hasClass("active")){
					$(this).find("em").removeClass("icon-jian").addClass("icon-add");
					$(this).removeClass("active").next().slideUp();
				}
				else{
					$(this).find("em").removeClass("icon-add").addClass("icon-jian");
					$(this).addClass("active").next().slideDown();
				}
			});
		</script>
	</body>
</html>