折叠收缩 javascript+css+html

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量170 收藏
点赞数
分类专栏： css javascript 文章标签： javascript xhtml java ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czpae86x/article/details/84209857
版权

效果：


使用的图标：


 

<%@ 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;">&#160;</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">&nbsp;</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">&nbsp;</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;">&#160;</th></tr>
    			<tbody id="case_files">
    			</tbody>    			
    		</table>
    	</fieldset>
    	
    	<!-- 一审信息 -->
    	<fieldset>
    		<legend><em class="t-tool t-tool-toggle">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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';
			}
		}
	}			
}

 

czpae86x
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 展开 折叠,HTML实现点击展开和收起
weixin_35886636的博客
05-30 3042
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">#box,#box2,#box3,#box4{padding:10px;border:1pxsolidgreen;}//========================...
html+css+js基础问答
qq_43751465的博客
08-26 5110
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
【HTML】- 实现展开与收起效果
热门推荐
baidu_hxl的博客
07-27 5万+
javascript和jQuery分别实现实现展开与收起动画效果
css折叠栏,伸长收缩
qq_41792374的博客
09-17 436
<template> <div class="doctor-wrapper pl-3 pt-3 pb-8 pr-3"> <div class="doc-name subtitle-1 mb-2 main-title">{{componentConfig.mainTitle}}</div> <div class="doc-desc subtitle-2 d-flex justify-space-between mb-2"> .
html页面内容的收缩和展开效果
王永存
02-08 3万+
html页面内容的收缩和展开效果 常见的网页中，会见到收缩和展开的效果。比如经常浏览网页里的新闻内容就会经常看到这种效果，新闻的内容只显示少数的一部分，然后后面会跟一个展开的链接，点击这个链接才会显示全部的新闻内容。 1、收缩情况下显示内容效果 2、点开之后显示的内容效果 3、实现的代码如下： <!DOCTYPE html> <html lang="e...
[效果]JS折叠菜单-使用方法
银月清风的专栏
12-13 4134
用法:1.添加JS库CODE:2.建立xhtml结构:CODE:    (1)这里放标题            (1)这里放内容        (2)这里放标题            (2)这里放内容    (3)这里放标题            (3)这里放内容    3.调用JS:CODE:    //定义contents 组数为所有将要显示的内容    var c
html内容折叠,HTML+CSS入门 文本折叠详解
weixin_42501077的博客
05-30 3338
本篇教程介绍了HTML+CSS入门 文本折叠详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<先看效果：收缩状态展开状态源代码：html>文本折叠测试.a-text{font-size:20px;color:#b30000;cursor:pointer;}.a-text:hover{color:red;}.p1{font-size:16px;c...
HTML+CSS+JavaScript 实现三级菜单逐级展开效果
hcc13974721431的博客
01-09 1285
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三级菜单</titl.
Html5 + Css3笔记详细汇总大全
weixin_50637054的博客
04-10 4150
Html5 + Css3笔记详细汇总大全
jQuery+CSS3炫酷手风琴特效.zip
11-19
例如，在手风琴特效中，jQuery的滑动（slide）函数可以用于创建元素的展开和收缩效果，使得内容以平滑的方式显示或隐藏。 接着是CSS3，它是CSS的最新版本，引入了许多新的样式属性和功能，如选择器、过渡...
jQuery+CSS3风琴折叠图片效果.zip
09-25
标题中的“jQuery+CSS3风琴折叠图片效果”是指一种网页交互设计，它结合了JavaScript库jQuery和CSS3的技术，创造出一种类似手风琴展开和折叠的动态视觉效果。这种效果通常用于展示多张图片，当用户点击某一张图片时...
CSS层折叠(或收缩)与展开特效
05-12
"CSS层折叠(或收缩)与展开特效"是一个结合了这两种技术，实现网页元素动态显示与隐藏的交互效果。这种效果常见于导航菜单、侧边栏、内容区块等，它允许用户点击后展开或折叠内容，提高用户体验，尤其在内容丰富的...
js+css3制作响应式导航菜单特效代码
03-20
在这个场景中，我们讨论的是使用JavaScript（JS）和CSS3来创建一个响应式的导航菜单特效，这种菜单尤其适用于移动优先的设计策略。下面将详细阐述这个过程中涉及的技术和知识点。 首先，CSS3是层叠样式表的第三个...
9种html5+css3隐藏侧边栏导航菜单动画效果
10-04
HTML5和CSS3是现代网页开发的两大核心技术，它们提供了丰富的功能和强大的表现力，使得网页设计更加生动、交互性更强。在这个主题中，“9种html5+css3隐藏侧边栏导航菜单动画效果”主要关注的是如何利用这两门技术来...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1129
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 165
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 129
【代码】vue el-select的下拉树形结构。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 593
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
html+css+javascript网页制作案例教程(第2版)下载
09-07
《HTML CSS JavaScript网页制作案例教程(第2版)》是一本非常实用的电子书，里面介绍了如何使用HTML、CSS和JavaScript创建网页。这本书适合初学者，可以帮助他们快速入门网页制作。 这本教程分为多个章节，每个章节...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值