HTML 展开收起
（1） 授课老师教的展开收起的实现
Html部分
（1）<div class="cont"> <div class="tab_box2" id="tab_box2"> <table class="caozuo" cellspacing="0"> <tr> <th>操作详情</th> <th>操作人</th> <th>环节</th> <th>时间</th> <th>备注</th> </tr> <tr> <td>任务分配</td> <td>熊伟</td> <td>技术开发</td> <td>2014-10-24 14:30</td> <td>由于南京看房团项目启动，被迫延期</td> </tr> <tr> <td>任务分配</td> <td>熊伟</td> <td>技术开发</td> <td>2014-10-24 14:30</td> <td>由于南京看房团项目启动，被迫延期</td> </tr> <tr> <td>任务分配</td> <td>熊伟</td> <td>技术开发</td> <td>2014-10-24 14:30</td> <td>由于南京看房团项目启动，被迫延期</td> </tr> <tr> <td>任务分配</td> <td>熊伟</td> <td>技术开发</td> <td>2014-10-24 14:30</td> <td>由于南京看房团项目启动，被迫延期</td> </tr> <tr> <td>任务分配</td> <td>熊伟</td> <td>技术开发</td> <td>2014-10-24 14:30</td> <td>由于南京看房团项目启动，被迫延期</td> </tr> <tr> <td>任务分配</td> <td>熊伟</td> <td>技术开发</td> <td>2014-10-24 14:30</td> <td>由于南京看房团项目启动，被迫延期</td> </tr> <tr> <td>任务分配</td> <td>熊伟</td> <td>技术开发</td> <td>2014-10-24 14:30</td> <td>由于南京看房团项目启动，被迫延期</td> </tr> <tr> <td>任务分配</td> <td>熊伟</td> <td>技术开发</td> <td>2014-10-24 14:30</td> <td>由于南京看房团项目启动，被迫延期</td> </tr> </table> </div> <div class="zkmore"> <p class="sm_open" id="sm_open">展开更多 <i></i></p> <p class="sm_close" id="sm_close">收 起<i></i></p> </div> </div>
Css部分
.cont{ padding:15px; border-radius: 5px; background: white; box-shadow: 0 2px 3px #ccc; position: relative; margin-bottom: 20px; } .cont>p:first-child{ padding:5px 0 20px 20px; font-size: 18px; } .cont>p span{ font-size:18px; color: #ff5600; } .caozuo{ width:100%; } .caozuo tr th,.caozuo tr td{ text-align:center; height: 30px; padding: 5px 10px; } .caozuo tr th:last-child,.caozuo tr td:last-child{ text-align: left; } .caozuo tr td{ border-top: 1px solid #e4e7ed; color:#7d7d7d; } .caozuo tr th{ color:#057ee9; } /* .caozuo tr td{ border-top: 1px solid #e4e7ed; color:#7d7d7d; } */ .zkmore{ text-align:center; border-top: 1px solid #e4e7ed; padding-top: 10px; } .zkmore p.sm_open,.zkmore p.sm_close{ position:relative; cursor: pointer; } .zkmore p.sm_open i{ position:absolute; width:6px; height:11px; background: url(../images/zkmore.gif) top left no-repeat; top:2px; margin-left: 5px; } .zkmore p.sm_close{ display: none; } .zkmore p.sm_close i{ position:absolute; width:6px; height:11px; background: url(../images/zkmore.gif) 0px -19px no-repeat; top: 2px; margin-left: 5px; } .tab_box2{ height: 200px; overflow: hidden; transition: height 1s ease-out;/*css3动画：设置动画时间1s*/ }
Js部分
// JavaScript Document window.onload = function(){ var sm_open = document.getElementById("sm_open");//展开操作详情按钮 var sm_close = document.getElementById("sm_close");//关闭操作详情按钮 //操作详情表的展开和收起 sm_open.onclick = function(){ tab_box2.style.height = "360px"; sm_close.style.display = "block"; sm_open.style.display = "none"; }; sm_close.onclick = function(){ tab_box2.style.height = "200px"; sm_close.style.display = "none"; sm_open.style.display = "block"; }; }; }
效果
下面是我们做项目时展开收起的实现
1、 html部分
<!doctype html> <html> <head> <meta charset="utf-8"> <title>展开收起</title> </head> <body> <div class="box"> <div class="warp"> <div class="zksq"> <ul> <li>手机</li> <span>-</span> <li>商品筛选</li> </ul> <ul> <li>网络:</li> <li>移动4G（TD-LTE）</li> <li>联通4G（TD-LTE）</li> <li>电信3G（WCDMA）</li> </ul> <ul> <li>价格:</li> <li>5000以上</li> <li>4000-4999</li> <li>3000-3999</li> <li>2000-2999</li> </ul> <ul> <li>特点:</li> <li>JDPhone计划</li> <li>"0"元购机</li> <li>防水</li> <li>长待机</li> <li>1080P全高清屏</li> </ul> <ul> <li>价格:</li> <li>5000以上</li> <li>4000-4999</li> <li>3000-3999</li> <li>2000-2999</li> </ul> <ul> <li>价格:</li> <li>5000以上</li> <li>4000-4999</li> <li>3000-3999</li> <li>2000-2999</li> </ul> </div> </div> <div class="new"> <p id="open"><span id="open1">展开</span></p> <p id="close"><span id="close1">收起</span></p> </div> </div> <script type="text/javascript" src="zhankaishouqi.js"></script> </body> </html>
2、 css部分
@charset "utf-8"; /* CSS Document */ *{ padding: 0; margin: 0; } .box{ width: 1000px; margin: 0 auto; } li{ display: inline-block; } .warp{ margin: 0 auto; width: 605px; background: #e5e5e5; padding: 10px 25px 0 25px; } ul{ padding: 5px 0; } .new{ width: 635px; margin: 0 auto; border-top: #666666 solid 3px; } p{ text-align: center; } #open{ display: block; } #close{ display: none; } #open1{ display: inline-block; width: 125px; line-height: 50px; color: #d8f5ff; height: 50px; background: #666666; cursor: pointer; } #close1{ display: inline-block; width: 125px; line-height: 50px; color: #d8f5ff; height: 50px; background: #666666; cursor: pointer; } .zksq{ height: 65px; overflow: hidden; transition: height 1s ease-out; }
3、 js部分
// JavaScript Document window.onload=function(){ var open=document.getElementById("open"); var close=document.getElementById("close"); var zksq=document.getElementsByClassName("zksq"); open.onclick=function(){ zksq[0].style.height="190px"; open.style.display="none"; close.style.display="block"; }; close.onclick=function(){ zksq[0].style.height="65px"; open.style.display="block"; close.style.display="none"; }; };
4、 实现的效果