DOM（二）-04-(示例-展开闭合列表2)

最新推荐文章于 2015-08-20 17:27:16 发布

wy_0928

最新推荐文章于 2015-08-20 17:27:16 发布

阅读量330

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47810475

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!--
重点说明前一视频的问题:
1.ifelse设置的不合适，if和else都有修改节点属性的代码，重复→直接预定义样式完成

2.现有3个列表，不再像之前只有1个列表，那么希望单击谁就展开或收起谁，怎么做？
只要在事件onclick()中传入this即可，因为this是单击谁就操作谁，这个方法简单通用，【一定记住】
-->


<html>
	<head>
		<style type="text/css">
		
		dl dd{
			margin:0px;
		}
		
		dl{
			height:16px;
		}
		
		/*预定义一些样式，类选择器，便于给标签进行样式的动态加载*/
		
		.open{
			overflow:visible;
		}
		
		.close{
			overflow:hidden;
		}
		
		</style>
	</head>
	<body>
		<script type="text/javascript">
			
			function list(node){
				
				//1.获取dl节点，由于this拿到的是dt节点，所以找其父节点，即dl节点
				var oDlNode = node.parentNode;
				
				//2.设置dl的className属性值，即通过预定义样式（类选择器）实现动态效果
				//这里换一种控制方式
				if(oDlNode.className == "close"){//如果当前列表状态是close
					
					oDlNode.className = "open";//那就open
					
				}else{//如果当前列表状态是open
					
					oDlNode.className = "close";//那就close
					
				}
				
			}
		
		</script>
		
		<dl class="close">	<!-- 通过预定义样式，即类选择器控制列表初始状态 -->
		<dt οnclick="list(this)">显示条目一</dt>
		<dd>展开列表内容1</dd>
		<dd>展开列表内容1</dd>
		<dd>展开列表内容1</dd>
		<dd>展开列表内容1</dd>
		</dl>
		<dl class="close">
		<dt οnclick="list(this)">显示条目二</dt>
		<dd>展开列表内容2</dd>
		<dd>展开列表内容2</dd>
		<dd>展开列表内容2</dd>
		<dd>展开列表内容2</dd>
		</dl>
		<dl class="close">
		<dt οnclick="list(this)">显示条目三</dt>
		<dd>展开列表内容3</dd>
		<dd>展开列表内容3</dd>
		<dd>展开列表内容3</dd>
		<dd>展开列表内容3</dd>
		</dl>
	</body>
</html>

wy_0928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（二）-04-(示例-展开闭合列表2)

 dl dd{ margin:0px;
复制链接

扫一扫