（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、 实现的效果
