仿淘宝网产品列表的收起展开、隐藏显示代码

发布时间：2018-08-21 02:14:51 所属栏目：活动来源：站长网

导读：Java Script仿淘宝网产品列表的收起与展开，平时状态它是收缩起来的，也就是说不显示所有的内容，当用户需要看所有内容的时候可以点击展开的按钮，点击后所有内容显示出来，再次点击，则回到合拢状态，这是一个常用的网页效果。示例： !DOCTYPE htmlhtml

　　JavaScript仿淘宝网产品列表的收起与展开，平时状态它是收缩起来的，也就是说不显示所有的内容，当用户需要看所有内容的时候可以点击展开的按钮，点击后所有内容显示出来，再次点击，则回到合拢状态，这是一个常用的网页效果。

　　示例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #main { width:500px; font-size:12px; border:1px solid #FFC44C; } #box1 { width:500px; height:80px; } .box2 { border-top:#FFC44C solid 1px; width:500px; height:80px; border-bottom:1px #FFC44C solid; } .boxS { border-top:#FFC44C solid 1px; width:500px; height:80px; border-bottom:1px #FFE6B3 solid;margin-bottom:1px; } .box3 { border-bottom:#FFE6B3 solid 1px; width:500px; margin-bottom:1px; display:none; } .boxt { border-bottom:#FFE6B3 solid 1px; width:500px; margin-bottom:1px; display:block; } #box4 { width:500px; height:5px; background:#FFF7E5; position:relative; } #box4 span { width:80px; border:1px #FFC44C solid; position:absolute; left:40%; top:5px; background:#FFF7E5; border-top:none; text-align:center; cursor:pointer; } </style> <script type="text/javascript"> window.onload=function(){ var box_2 = document.getElementById("box2"); var box_3 = document.getElementById("box3"); var box_4 = document.getElementById("box4").getElementsByTagName("span")[0]; box_4.onclick=function(){ box_3.className=(box_3.className=="box3")?"boxt":"box3"; box_2.className=(box_2.className=="boxS")?"box2":"boxS"; this.innerHTML=(this.innerHTML=="Show")?"Hidden":"Show"; } } </script> </head> <body> <div id="main"> <div id="box1"></div> <div id="box2" class="boxS"></div> <div id="box3" class="box3"> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </div> <div id="box4"><span>Show</span></div> </div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：西安站长网）

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