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

发布时间：2018-08-18 22:27:59 所属栏目：聚会来源：站长网

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

　　一个简单的展开收缩、显示隐藏效果，使用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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：上饶站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!