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

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

　　示例：

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

热点

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

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

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

由 dawei

相关文章

网站优化的整个完整步骤

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

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

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性