折叠面板

由于折叠面板只是显示隐藏的交互,所以并没有做成插件或组件形式,在这里只提供了几行代码供大家参考。

折叠面板在移动端是非常常见的,在一定程度上可以代替表格展示内容,移动端展示区域有限,所以表格展示数据是非常困难的,利用折叠面板就能很好的解决这一问题。

注意:折叠面板触发事件是tap,请使用开发者工具模拟触摸。

建议新窗口打开,使用Chrome浏览器或Firefox浏览器的开发者模式查看!
》 新窗口打开

折叠面板示例代码

折叠面板的样式可以根据不同class来组合
//折叠面板
 <div class="f30 color3">
 	<dl class="o-h">
 		<dt class="pl3 pr3 f40"><i class="pr1 icon iconfont icon-fold"></i>讲一个笑话</dt>
 		<dd class="p2 pl3 pr3">明天爸爸生日...</dd>
 	</dl>
 	<dl class="o-h">
 		<dt class="pl3 pr3 f40"><i class="pr1 icon iconfont icon-fold"></i>学姐你冷吗</dt>
 		<dd class="p2 pl3 pr3"> 大一时,有个学弟追我...</dd>
 	</dl>
 </div>

 <script type="text/javascript">
 	$('dl dt').live('tap', function() {
 		$(this).siblings('dd').toggle();
 		$(this).children('i').toggleClass('icon-fold icon-unfold');
 	});
 </script>

案例补充样式如下:

dl{border:1px solid #efeeee; margin-top:-1px}
 dt{line-height:2em; cursor:pointer}
 dd{border-top:1px solid #efeeee; display:none; line-height:1.8em}