一个简单的展开收缩、显示隐藏效果

　　一个简单的展开收缩、显示隐藏效果，使用JS实现的，其实就是折叠层的效果，点击展开内容，再点击就关闭隐藏了内容，在一些由于时间关系，没有经过太多美化，比较粗糙，如果您有时间可以美化一下！

　　示例：

<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>显示与隐藏</title> <style type="text/css"> * { padding:0; margin:0; } body { font:14px verdana; margin-top:50px; } #tc { width:780px; margin:0 auto; } #sb,#c { border:1px solid #85acfe; } dl { background:#f3faff; } dl dt { background:#e4edff; } dl dt a { cursor:pointer; } dl dt a:hover{ color:#f00; } dl dd { height:20px; } </style> </head> <body> <div id="tc"> <div id="sb"> <dl> <dt><a href="javascript:void(0)" onclick=Uhos(this)>显示隐藏</a></dt> <dd>烈火veryhuo.com</dd> <dd>烈火veryhuo.com</dd> <dd>烈火veryhuo.com</dd> <dd>烈火veryhuo.com</dd> <dd>烈火veryhuo.com</dd> <dd>烈火veryhuo.com</dd> <dd>烈火veryhuo.com</dd> </dl> </div> <div id="c"> <dl> <dt><a href="javascript:void(0)" onclick=Uhos(this)>显示隐藏</a></dt> <dd>- - - - - - - -</dd> <dd>- - - - - - - -</dd> <dd>- - - - - - - -</dd> <dd>- - - - - - - -</dd> <dd>- - - - - - - -</dd> <dd>- - - - - - - -</dd> <dd>- - - - - - - -</dd> </dl> </div> </div> <script type="text/javascript"> function Uhos(obj){ var lis=document.getElementById("sb").getElementsByTagName("dd"); for (i=0;i<lis.length;i++){ if (lis[i]!=obj){ lis[i].style.display=lis[i].style.display==""?"none":""; } else{ lis[i].style.display=lis[i].style.display==""?"":""; } } } </script> </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

一个简单的展开收缩、显示隐藏效果

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

一个简单的展开收缩、显示隐藏效果

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀