<!--
重点说明前一视频的问题:
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>
DOM(二)-04-(示例-展开闭合列表2)
最新推荐文章于 2019-08-31 15:01:11 发布