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;
}
最低0.47元/天 解锁文章
515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
