HTML 展开收起

最新推荐文章于 2025-04-07 11:42:32 发布
原创 最新推荐文章于 2025-04-07 11:42:32 发布
· 1.1w 阅读 · 23 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

（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">收&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;起<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>&nbsp;&nbsp;
		 <li>移动4G（TD-LTE）</li>
		<li>联通4G（TD-LTE）</li>
		<li>电信3G（WCDMA）</li>
	</ul>
	<ul>
		<li>价格:</li>&nbsp;&nbsp;
		<li>5000以上</li>
		<li>4000-4999</li>
		<li>3000-3999</li>
		<li>2000-2999</li>
	</ul>
	<ul>
		<li>特点:</li>&nbsp;&nbsp;
		<li>JDPhone计划</li>
		<li>"0"元购机</li>
		<li>防水</li>
		<li>长待机</li>
		<li>1080P全高清屏</li>
	</ul>
	<ul>
		<li>价格:</li>&nbsp;&nbsp;
		<li>5000以上</li>
		<li>4000-4999</li>
		<li>3000-3999</li>
		<li>2000-2999</li>
	</ul>
	<ul>
		<li>价格:</li>&nbsp;&nbsp;
		<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、 实现的效果
在这里插入图片描述
在这里插入图片描述

忘川茶社
关注
html 展开 折叠,HTML实现点击展开和收起
weixin_35886636的博客
05-30 3264
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">#box,#box2,#box3,#box4{padding:10px;border:1pxsolidgreen;}//========================...
HTML展开收起动画过渡
LILI_JU88的博客
09-07 1022
1.新建一个HTML文件，并引入css、JavaScript文件 2.在body内创建div标签,并给它一个类名（cont）和一些样式,例如： 3.然后在div（cont）标签内放入一个div标签（cont-table）,在div标签内写一些内容 4.给div（cont-table）内的table标签写些样式 5.然后在div（cont）内、div（cont-table）下方写入开关的代码还有样式,如图： 6.收起部分内容，将内容的高度设置成“显示的内容部分”和过渡效果“tr.
html Div层的展开与收缩
08-27
html Div层的展开与收缩的特效源代码下载
【HTML】- 实现展开与收起效果
baidu_hxl的博客
07-27 5万+
javascript和jQuery分别实现实现展开与收起动画效果
HTML&CSS：超好看的收缩展开菜单
最新发布
weixin_52814911的博客
04-07 937
这个页面实现了一个具有动画效果的菜单选择框，用户可以通过点击按钮选择不同的菜单选项。页面使用了SVG图标和CSS动画来增强视觉效果，整体设计风格现代且具有视觉吸引力。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。 HTML 结构 potion-select potion-select：定义了一个选择框，用于选择不同的图标选项。 potion-equipped：定义了一个按钮，显示当前选中的药水。 select
HTML实现点击展开和收起
热门推荐
07-04 6万+
#box,#box2,#box3,#box4{padding:10px;border:1px solid green;} //===========================点击展开关闭效果==================================== function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenT
html表展开收起,HTML实现点击展开和收起
weixin_39731107的博客
05-30 890
#box,#box2,#box3,#box4{padding:10px;border:1px solid green;}//===========================点击展开关闭效果====================================function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oS...
html 文字折叠行 展开,CSS 实现多行文本“展开收起”
weixin_42119866的博客
05-31 2770
多行文本展开收起是一个很常见的交互， 如下图演示实现这一类布局和交互难点主要有以下几点位于多行文本右下角的“展开收起”按钮“展开”和“收起”两种状态的切换当文本不超过指定行数时，不显示“展开收起”按钮说实话，之前单独看这个布局，即使借助 JavaScript 也不是一件容易的事啊(需要计算文字宽度动态截取文本，vue-clamp就是这么做的)，更别说下面的交互和判断逻辑了，不过经过我的一番琢磨，其...
小程序实现列表展开收起效果
10-15
在小程序开发中，实现列表展开收起的效果是一个常见的需求，特别是在处理包含子项的列表时。这个功能可以增强用户体验，使界面更加互动。下面我们将详细探讨如何在小程序中实现这一效果。 首先，我们要理解实现这一...
HTML Table之展开收起
askilledhand的专栏
06-24 4714
效果图，第一条和第二条效果相同，第一条是点击后展开效果： 主要代码如下： table： <thead> <tr> <td>条数</td> <td>内容</td> </tr> </thead> <tbody> <tr> <td>第1条...
html css侧边展开收起,css实现侧边展开收起
weixin_28935113的博客
06-08 1173
**前言：**因为突然想研究研究侧边栏滑动展开收起怎么做的，就去baidu了一下transition。先来看一下我的代码：详情内容1内容1内容1内容1内容1.detail {position: fixed;right: -100px;transition: right 1s;}.detail:hover {right: 0;}.div1 {background-color: green;borde...
html导航折叠与展开,html展开收起
weixin_39905695的博客
05-30 2739
HTML中，点击列表元素，在其下展开更多的小选项。不点的时候是收起来的最常见的方法是通过Javascript控制某标签的CSS属性来实现的，下面是具体实现方法： 首先给要隐藏或显示的部分所在标签一个惟一的ID，比如将它们放到一个里; 然后给某个实体(按你的意思来，就是"列表元素")的onclick事件写一个响应的方法。html网页中，一个按钮可以实现展开和收起两个功能-...类似的代码百度搜索一下...
html文本超出隐藏，展开和收起。
Hhjian524的博客
07-17 7404
主要是实现当文本的长度超出一定的长度时，文本剩余的部分省略，出现展开，点击展开，文本全部显示，点击收起，文本回复省略显示。 之前文本的超出多少行省略显示主要是用到以下的css样式来控制 text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;/*行数*/ line-clamp:
html中为div添加展开与收起功能（div折叠）
暂无内容
09-23 1465
2、添加展开收起按钮div (i为图标，可自行修改)3、添加js代码响应逻辑。
html 展开与收起怎么写,自己写了一个展开和收起的多更能型的js效果
weixin_42526166的博客
05-30 1532
先来看看效果：具体的功能是：1.页面上面最多只有一个是显示全部内容的。2.当自己处于全部显示的时候，点击自己的收起，自己收起。3.当自己处于全部显示的时候，点击其他的展开是，自己内容隐藏，原来的"收起"变为"展开"而被点击的选项则内容全部显示，"展开"变为"收起"=================================================部分代码：==============...
前端实现文本展开收起
beautyyaoyao的博客
04-07 994
需求描述：文本内容若一行能够展示完，则不需要更多/收起按钮；若不能则需单行文本省略展示并显示更多/收起按钮可供操作。文本的展开收起是我们网页常常需要优化处理的操作。
html+css+js 简易展开收起效果
zhengxue_er
09-29 1万+
用html+css+js做一个简易的文本展开收起效果。如图： （部分结构标签可能不是最佳选择，此次仅以实现展开收起效果为例子） 以HBuilder编辑器选项卡中“查找”选项为例。设定“查找”为链接，点击链接实现标签的展开收起效果。1.html部分①.首先确定该选项的构成：一个显示标签和一组隐藏选项。html的整体结构框架为：<div id="showdiv"> <a i
html中为div添加展开与收起功能2（div隐藏与显示）
暂无内容
09-23 444
html中为div添加展开与收起功能2（div隐藏与显示） div显示、div隐藏
html展开收起样式,前端网页内容实现展开/收起全文的操作（js+css控制高度实现）...
weixin_31865445的博客
05-30 3263
在展示大量文本的时候,很多网站会在页面上出现一个展开全文的文字按钮 , 点击这个按钮才会展开全部内容.使用jquery比较容易实现,控制div的高度展现。思路是 , 获取当前html文本的div高度 ,超过一定高度就增加一个class值 . 它旁边的点击展开全文默认隐藏 , 超过高度展示 .展开全文点击后更换文字内容为收起全文下面直接展示代码：1、html的div文本内容比如是这样内容.........
html的展开收起
03-19
### HTML 和 JavaScript 实现内容展开与收起功能 要实现内容的展开与收起效果，可以结合 HTML、CSS 和 JavaScript 来完成。以下是具体方法： #### 方法概述 通过设置一个按钮或链接来触发事件，利用 JavaScript 动态修改目标元素的样式属性（如 `display` 或 `height`），从而达到内容显示或隐藏的效果。 --- #### 示例代码 以下是一个完整的示例，展示了如何使用 HTML 和 JavaScript 实现这一功能： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>内容展开与收起</title> <style> /* 定义初始样式 */ .content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; background-color: #f9f9f9; padding: 0 10px; } .toggle-button { cursor: pointer; margin-top: 10px; display: inline-block; } .expanded { max-height: 200px; /* 设置最大高度以适应内容 */ } </style> </head> <body> <div class="container"> <!-- 展开/收起的内容 --> <div id="expandableContent" class="content"> 这是一段被折叠的内容。你可以点击下面的按钮将其展开或再次收起。<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <!-- 切换按钮 --> <a href="#" class="toggle-button" onclick="toggleContent()">点击查看更多...</a> </div> <script> function toggleContent() { const contentElement = document.getElementById('expandableContent'); const button = document.querySelector('.toggle-button'); if (contentElement.classList.contains('expanded')) { // 如果已经展开，则收起 contentElement.classList.remove('expanded'); button.textContent = '点击查看更多...'; } else { // 否则展开 contentElement.classList.add('expanded'); button.textContent = '点击收起'; } } </script> </body> </html> ``` --- #### 关键点解析 1. **HTML 结构** - 使用 `<div>` 标签包裹需要展开或收起的内容。 - 添加一个按钮或链接作为触发器，绑定点击事件[^1]。 2. **CSS 样式** - 初始化 `.content` 类为不可见状态 (`max-height: 0`) 并禁用溢出部分(`overflow: hidden`)。 - 当添加类名 `.expanded` 时，调整其 `max-height` 值使其可见[^4]。 3. **JavaScript 控制逻辑** - 获取 DOM 元素并通过 `classList.toggle()` 方法切换 CSS 类名。 - 修改按钮文字以提示当前操作是“展开”还是“收起”[^2]。 --- #### 扩展说明 如果希望支持更复杂的需求，比如动态加载数据或者渐变动画，可以通过以下方式增强： - 使用 AJAX 请求获取远程数据并填充到容器中。 - 应用第三方库（如 jQuery）简化 DOM 操作和动画处理。 ---
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值