折叠收缩 javascript+css+html
效果：
使用的图标：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CPM案件池待办</title>
<link rel="icon" href="<%=request.getContextPath()%>/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<%=request.getContextPath()%>/favicon.ico" type="image/x-icon" />
<link rel="bookmark" href="<%=request.getContextPath()%>/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta id="author" content="skywin" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/view/pacTask/resource/common.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/view/pacTask/pactaskcommon.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/view/pacTask/todoPage.js"></script>
<style type="text/css">
body{
font-size : 12px;
background: #F6FAFF;
height : 100%;
}
.labeltd{
text-align : right;
width : 115px;
}
fieldset{
padding:5px;
}
fieldset legend{
font-weight : bold;
cursor : hand;
cursor : pointer;
}
.panel-t{
width: 100%;
}
.panel-t input,textarea{
width : 100%;
border : 1px solid #CCCC99;
}
.t-tool {
background: url("resource/images/tool-sprites.gif") no-repeat scroll 0 0 transparent;
cursor: pointer;
float: left;
height: 15px;
margin-left: 2px;
overflow: hidden;
width: 15px;
}
.t-tool-toggle {
background-position: 0 -75px;
}
.t-tool-toggle2 {
background-position: 0 -60px;
}
</style>
</head>
<body>
<div id="loading-mask" style="width:100%;height:100%;background:#f1f1f1;position:absolute;z-index:20000;left:0;top:0;"> </div>
<div id="loading">
<div class="loading-indicator">
<div>欢迎使用</div>
<img src="<%=request.getContextPath()%>/lib/ext/resources/images/default/grid/wait.gif" width="18" height="18" style="margin-right:5px;" align="absmiddle"/>
<span id="load-status" style="font-weight : normal;">正在加载数据,请稍候...</span>
</div>
</div>
<div style="margin:70px;">
<!-- 基本信息 -->
<fieldset>
<legend><em class="t-tool t-tool-toggle"> </em>基本信息</legend>
<table cellPadding="1" cellSpacing="1" border="0" class="panel-t">
<tr>
<td class="labeltd">纠纷案件名称：</td>
<td colSpan="5" ><input type="text" id="caseName" /></td>
</tr>
<tr>
<td class="labeltd">案件号：</td>
<td colSpan="5" ><input type="text" id="caseNumber" /></td>
</tr>
<tr>
<td class="labeltd">法律风险控制点：</td>
<td colSpan="5" ><textarea id="lawRiskName" rows="5" ></textarea><td>
</tr>
<tr>
<td class="labeltd">其他法律风险点：</td>
<td colSpan="5" ><input type="text" id="otherLawRisk" /></td>
</tr>
<tr>
<td class="labeltd">案件处理公司：</td>
<td colSpan="3"><input type="text" id="caseCompany" /></td>
<td class="labeltd">案件性质：</td>
<td><input type="text" id="caseKind"/></td>
</tr>
<tr>
<td class="labeltd">案件关键字：</td>
<td colSpan="5" ><textarea rows="5" id="caseKeyWord"></textarea></td>
</tr>
<tr>
<td class="labeltd">是否公开：</td>
<td><input type="text" id="isOpen"/></td>
<td class="labeltd">公司是否原告：</td>
<td><input type="text" id="isPlaintiff"/></td>
<td class="labeltd">是否反黑联盟案件：</td>
<td><input type="text" id="union"/></td>
</tr>
<tr>
<td class="labeltd">案件状态：</td>
<td><input type="text" id="caseStatus"/></td>
<td class="labeltd">号码归属地：</td>
<td><input type="text" id="numCity"/></td>
<td class="labeltd">主审法官：</td>
<td><input type="text" id="judeg"/></td>
</tr>
<tr>
<td class="labeltd">标的金额：</td>
<td><input type="text" id="amount"/></td>
<td class="labeltd">处理人员：</td>
<td><input type="text" id="caseOwner"/></td>
</tr>
</table>
</fieldset>
<!-- 案件资料 -->
<fieldset>
<legend><em class="t-tool t-tool-toggle"> </em>案件资料</legend>
<table border=1 cellPadding=0 cellSpacing=0 style="margin:5px;width:840px;">
<tr><th width="40px" style="text-align:center;">序号</th><th width="480px" style="text-align:center;">名称</th><th width="90px" style="text-align:center;">分类</th><th width="160px" style="text-align:center;">上传时间</th><th width="70px" style="text-align:center;"> </th></tr>
<tbody id="case_files">
</tbody>
</table>
</fieldset>
<!-- 一审信息 -->
<fieldset>
<legend><em class="t-tool t-tool-toggle"> </em>一审信息</legend>
<table cellPadding="1" cellSpacing="1" border="0" class="panel-t">
<tr>
<td class="labeltd">原告(申请人)：</td>
<td><input type="text" id="plaintiff"/></td>
<td class="labeltd">被告(被申请人)：</td>
<td><input type="text" id="defendant"/></td>
<td class="labeltd">第三人：</td>
<td><input type="text" id="third"/></td>
</tr>
<tr>
<td class="labeltd">发生时间：</td>
<td><input type="text" id="beginDate"/></td>
<td class="labeltd">终止时间：</td>
<td><input type="text" id="endDate"/></td>
</tr>
<tr>
<td class="labeltd">业务领域：</td>
<td><input type="text" id="businessField"/></td>
<td class="labeltd">案由：</td>
<td><input type="text" id="coa" /></td>
</tr>
<tr>
<td class="labeltd">案情简介：</td>
<td colSpan="5" ><textarea rows="5" id="caseDesc" ></textarea></td>
</tr>
<tr>
<td class="labeltd">诉讼请求：</td>
<td colSpan="5" ><textarea rows="5" id="claims" ></textarea></td>
</tr>
<tr>
<td class="labeltd">应诉方案：</td>
<td colSpan="5" ><textarea rows="5" id="respond" ></textarea></td>
</tr>
<tr>
<td class="labeltd">处理方式：</td>
<td><input type="text" id="actionType"/></td>
<td class="labeltd">一审处理机构/机关：</td>
<td><input type="text" id="court"/></td>
<td class="labeltd">处理结果：</td>
<td><input type="text" id="handleResult" /></td>
</tr>
<tr>
<td class="labeltd">生效法律文书目录：</td>
<td colSpan="5" ><textarea rows="5" id="lawDir"></textarea></td>
</tr>
</table>
</fieldset>
<!-- 二审信息 -->
<fieldset>
<legend><em class="t-tool t-tool-toggle"> </em>二审信息</legend>
<table cellPadding="1" cellSpacing="1" border="0" class="panel-t">
<tr>
<td class="labeltd">是否进行二审：</td>
<td><input type="text" id="retrial"/></td>
</tr>
<tr>
<td class="labeltd">二审诉求：</td>
<td colSpan="5" ><textarea rows="5" id="claims2"></textarea></td>
</tr>
<tr>
<td class="labeltd">二审处理机构/机关：</td>
<td colSpan="5" ><input type="text" id="court2"/></td>
</tr>
<tr>
<td class="labeltd">二审主审法官：</td>
<td><input type="text" id="judeg2"/></td>
<td class="labeltd">二审发生时间：</td>
<td><input type="text" id="beginDate2"/></td>
<td class="labeltd">二审终止时间：</td>
<td><input type="text" id="endDate2"/></td>
</tr>
<tr>
<td class="labeltd">处理人员：</td>
<td><input type="text" id="caseOwner2"/></td>
<td class="labeltd">处理结果：</td>
<td><input type="text" id="handleResult2"/></td>
</tr>
<tr>
<td class="labeltd">二审生效法律文书目录：</td>
<td colSpan="5" ><textarea rows="5" id="lawDir2"></textarea></td>
</tr>
<tr>
<td class="labeltd">案件分析及相关法律建议：</td>
<td colSpan="5" ><textarea rows="5" id="suggest"></textarea></td>
</tr>
<tr>
<td class="labeltd">备注：</td>
<td colSpan="5" ><textarea rows="5" id="memo"></textarea></td>
</tr>
</table>
</fieldset>
<!-- 再审或重审 -->
<fieldset>
<legend><em class="t-tool t-tool-toggle"> </em>再审或重审</legend>
<table cellPadding="1" cellSpacing="1" border="0" class="panel-t">
<tr>
<td class="labeltd">是否进行再审重审：<br /></td>
<td><input type="text" id="retrial3"/><br /></td>
</tr>
<tr>
<td class="labeltd">诉求：<br /></td>
<td colSpan="5" ><textarea rows="5" id="claims3"></textarea><br /></td>
</tr>
<tr>
<td class="labeltd">处理机构/机关：<br /></td>
<td colSpan="5" ><input type="text" id="court3" /><br /></td>
</tr>
<tr>
<td class="labeltd">主审法官：<br /></td>
<td><input type="text" id="judeg3"/><br /></td>
<td class="labeltd">发生时间：<br /></td>
<td><input type="text" id="beginDate3"/><br /></td>
<td class="labeltd">终止时间：<br /></td>
<td><input type="text" id="endDate3"/><br /></td>
</tr>
<tr>
<td class="labeltd">处理人员：<br /></td>
<td><input type="text" id="caseOwner3"/><br /></td>
<td class="labeltd">处理结果：<br /></td>
<td><input type="text" id="handleResult3"/><br /></td>
</tr>
<tr>
<td class="labeltd">生效法律文书目录：<br /></td>
<td colSpan="5" ><textarea rows="5" id="lawDir3"></textarea><br /></td>
</tr>
<tr>
<td class="labeltd">案件分析及相关法律建议：<br /></td>
<td colSpan="5" ><textarea rows="5" id="suggest3"></textarea><br /></td>
</tr>
<tr>
<td class="labeltd">备注：<br /></td>
<td colSpan="5" ><textarea rows="5" id="memo3"></textarea><br /></td>
</tr>
</table>
</fieldset>
<!-- 流程进度 -->
<fieldset>
<legend><em class="t-tool t-tool-toggle"> </em>流程进度</legend>
<table>
<tr></tr>
</table>
</fieldset>
</div>
</body>
</html>
代码片段：
/**
* 折叠
*/
function initToggle(){
var legends = document.getElementsByTagName('legend');
for(var i=0,len=legends.length;i<len;i++){
legends[i].onclick = function(){
for(var j=0,ln=this.parentElement.childNodes.length;j<ln;j++){
var nodeName = this.parentElement.childNodes[j].nodeName;
if(nodeName&&nodeName.toUpperCase() === 'TABLE'){//兼容浏览器,有的浏览器childNodes的个数不同
var tbl = this.parentElement.childNodes[j];
if(tbl.style.display === 'none'){
tbl.style.display = 'block';
this.childNodes[0].className= 't-tool t-tool-toggle';
}else {
tbl.style.display = 'none';
this.childNodes[0].className= 't-tool t-tool-toggle2';
}
}
}
}
}
/**
* 初始化折叠起
* @type Number
*/
for(var i=2,len=legends.length-1;i<len;i++){//init
for(var j=0,ln=legends[i].parentElement.childNodes.length;j<ln;j++){
var nodeName = legends[i].parentElement.childNodes[j].nodeName;
if(nodeName&&nodeName.toUpperCase() === 'TABLE'){//兼容浏览器,有的浏览器childNodes的个数不同
var tbl = legends[i].parentElement.childNodes[j];
tbl.style.display = 'none';
legends[i].childNodes[0].className= 't-tool t-tool-toggle2';
}
}
}
}