展开闭合效果

最新推荐文章于 2022-10-25 10:05:33 发布
最新推荐文章于 2022-10-25 10:05:33 发布
阅读量453 收藏
点赞数
分类专栏： JavaScript 文章标签： xhtml border table div html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jingtian_xiaozhi/article/details/8083997
版权

第一种过时，但是思路很好

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
	function demo()
	{
		var obj=event.srcElement;
		//alert (obj.nodeName);
		var dlNode=obj.parentNode;
		//alert(dlNode.nodeName);
		
		
		var dlNodes=document.getElementsByTagName("dl");//啊啊啊啊啊 getElementsByTagName
		//alert(dlNodes.length);
		for(var i=0;i<dlNodes.length;i++)
		{
			if(dlNodes[i]==dlNode)
			{
				if(dlNode.className=="open")
				{
					//dlNode.className="close";
					dlNode.style.overflow="hidden";
				}
				else
				{
					//dlNode.className="open";
					dlNode.style.overflow="visible";
				}
			}
			else
			{
				//dlNodes[i].className="close";
				dlNodes[i].style.overflow="hidden";
			}
		
		}
	
	}
	
</script>
<style type="text/css">
	.open{
	overflow:visible;
	}
	.close{
	overflow:
	}	
	dl {
	overflow:hidden;
	height:16px;
	}
</style>
</head>

<body>
	<dl id="haha">
		<dt οnclick="demo()">
			上层项目    
				<dd>有规律的气息，</dd>
				<dd>高效的学习。</dd>
				<dd>有规律的气息，</dd>
				<dd>高效的学习。</dd>
				<dd>有规律的气息，</dd>
				<dd>高效的学习。</dd>
			
		</dt>
	</dl>
	<dl>
		<dt οnclick="demo()">
			上层项目    
				<dd>有规律的气息，</dd>
				<dd>高效的学习。</dd>
				<dd>有规律的气息，</dd>
				<dd>高效的学习。</dd>
				<dd>有规律的气息，</dd>
				<dd>高效的学习。</dd>
			
		</dt>
	</dl>
	<dl>
		<dt οnclick="demo()">
			上层项目    
				<dd>有规律的气息，</dd>
				<dd>高效的学习。</dd>
				<dd>有规律的气息，</dd>
				<dd>高效的学习。</dd>
				<dd>有规律的气息，</dd>
				<dd>高效的学习。</dd>
			
		</dt>
	</dl>
	<dl>
		<dt οnclick="demo()">
			上层项目    
				<dd>有规律的气息，</dd>
				<dd>高效的学习。</dd>
				<dd>有规律的气息，</dd>
				<dd>高效的学习。</dd>
				<dd>有规律的气息，</dd>
				<dd>高效的学习。</dd>
			
		</dt>
	</dl>
</body>
</html>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
function demo()
{
	var a=event.srcElement;
	//alert(a.nodeName);
	var tdNode=a.parentNode;
	//alert(tdNode.nodeName);
	var divNode=tdNode.childNodes[2];#超链接里面的text也是一个节点  
	//alert(divNode.nodeName);
	
	var divNodes=document.getElementsByTagName("div");
	for(var i=0;i<divNodes.length;i++)
	{
		if(divNode==divNodes[i])
		{
			if(divNode.className=="open")
			{
				//divNode.className="close";
				divNode.style.display="none";
			}
			else
			{
				//divNode.className="open";
				divNode.style.display="block";
			}
		}
		else
		{
			//divNodes[i].className="close";
			divNodes[i].style.display="none";
		}
	}
	

}
</script>
<style>
	table {
	border: #666666 5px solid;
	}
	table td{
	border: #00CCFF 10px solid;
	}
	table td a{
	background-color:#00FF99;
	border: #33FF66 5px solid;
	}
	table td div{
	background-color:#00FF99;
	display:none;
	}
	a:link,a:visited{
	text-decoration:none;
	color:#FF00FF;
	}
	.open{
	display: block;
	}
	.close{
	display:none;
	}
</style>
</head>

<body>

<table>
	<tr>
		<td>
		 <a href="#" οnclick="demo()">好友列表</a>
			<div>
				张三<br/>
				李四<br/>
				王五<br/>
			</div>
		</td>
	</tr>
	<tr>
		<td>
		 <a href="#" οnclick="demo()">好友列表</a>
			<div>
				张三<br/>
				李四<br/>
				王五<br/>
			</div>
		</td>
	</tr>
	<tr>
		<td>
		 <a href="#" οnclick="demo()">好友列表</a>
			<div>
				张三<br/>
				李四<br/>
				王五<br/>
			</div>
		</td>
	</tr>
	<tr>
		<td>
		 <a href="#" οnclick="demo()">好友列表</a>
			<div>
				张三<br/>
				李四<br/>
				王五<br/>
			</div>
		</td>
	</tr>
</table>
</body>
</html>

第一种方法是利用dl的overflow

第二种方法是利用div的display

视频示例01

 

 

获取事件源的两种方式
event.srcElement
this


景天晓志
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js展开闭合效果演示代码
10-27
本文为大家介绍下js如何实现展开闭合效果，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
最简单的点击展开关闭效果
dududu01的专栏
09-01 1880
无标题文档 function show(obj){ var obj=document.getElementById(obj); //获得id为b的容器 //如果下面的内容显示的话就隐藏 if(obj.style.display=="block"){ obj.style.display="none"; }else obj.style.display="block"; }
前端 展开与闭合
lfx
05-06 424
<a id="d1<?php echo $val['id'] ?>" >展开</a> <div id='d2<?php echo $val['id'] ?>' style=" display:none" class="size_l"><?php echo $val['event_name']; ?></div>...
Array的方法演示
weixin_44413617的博客
11-10 100
数组的内置方法 1、栈方法：push（）在数组末尾添加数据 ，支持多个参数 ， 压栈； pop出栈 删除数组尾部元素 不能有参数 一次删一个。 var num=[1,2,3,4,5,6]; num.push(6,7,8); //在尾部添加元素 支持多个参数添加 num.pop(); //删除尾部元素 不能有参数 一次只能删一个 ...
JS-2级菜单的点击选中，展开闭合效果
weixin_43935061的博客
10-25 871
js处理2级lnb菜单，js处理点击，js循环菜单
jQuery---展开和闭合动画效果
qq_45802159的博客
11-25 335
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
jQuery实现默认是闭合的FAQ展开效果菜单
10-23
主要介绍了jQuery实现默认是闭合的FAQ展开效果菜单,涉及jQuery中slideUp及slideDown用法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript实现多栏闭合展开式广告位菜单效果实例
10-23
主要介绍了javascript实现多栏闭合展开式广告位菜单效果,可实现类似手风琴切换展示效果的功能,具有一定参考借鉴价值,需要的朋友可以参考下
【DOM】展开闭合列表示例
你今天真好看呀
08-31 336
1.标签封装数据 2.定义样式 3.明确事件源和事件 4.明确具体的操作方式，就是事件的处理内容 <html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*为dl下面的dd标签设置...
树状菜单 点击一个关闭另一个 默认第一个栏目的子栏目展开
zhaodao
05-15 1412
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}-->body {margin:0;text-alig
android可展开收起的textview
micotale的博客
06-07 4460
废话少说，先上效果。 文字可自由配置，字体颜色可定义，可定义首次展示状态等等。集成简单，高度可定制化。 1.整个封装在ExpandableTextView中。源码会在文末贴出链接 2.配置attr.xml.如下图 3.布局中使用 4.代码中使用 上述所有代码，均在源码中 ，点击下载https://download.csdn.net/d...
HTML列表<dl>表格<table>超链接<a href>
jingtianxiaozhi的专栏
10-01 6568
无标题文档 标记位置 我能打印出 景天晓志 标题 1 标题 2 标题 3 目录 JavaScript基础 1.html 2.css 上层项目 下层项目 下层项目 下层项目 上层项目 下层项目 下层项目 游戏名称 星际争霸 红色警戒 部门名称 技术部
HTML2<form><input><select><textarea><lable><field><lengend>
jingtianxiaozhi的专栏
10-02 1357
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 <!--熟练：table,tr,td;form表单标签:input输入标签（必须有type，name，可有value。男女是相同的名字不同的值），select选择标签:option子项
模拟qq阅读改变字体大小颜色
jingtianxiaozhi的专栏
10-15 1286
无标题文档 function changeSize(size) { var divNode=document.getElementById("divid"); divNode.style.fontSize=size; } function changeColor(color) { var divNode=document.getElementById("divid");
javascript的prototype给对象增加方法属性
jingtianxiaozhi的专栏
10-06 692
功能实现 第一步用prototype将方法增加给类对象 第二步this代替类对象 代码 无标题文档 var a=[1,2,3,6,7]; var x=a.getZuiDa(); var y=a.getZuiXiao(); alert(y); var s="---hello---"; var x=s.trim(); a
html以及JavaScript复习
jingtianxiaozhi的专栏
03-09 675
html复习1： 列表： dl dt dd ul符号 ol数字 li html复习2： checkbox :select option css复习 (绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。)（相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然
cesium 闭合曲线
最新发布
03-12
Cesium是一个用于创建地球上三维可视化的...可以使用PolylineGraphics或PolygonGraphics来实现闭合效果。 4. 设置曲线的样式、颜色、宽度等属性，以及其他附加信息。 5. 将Entity对象添加到Cesium的场景中进行显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值