javascript学习实录之六（div开关闭合效果实例）_div里有link 点div能闭合-CSDN博客

本文链接：https://blog.csdn.net/raosheng1993/article/details/45456955

以下代码是我写的关于标签开关闭合效果的实例，很简单的，内容及含义我就不说了，仔细看看，so easy

[javascript] view plain copy

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title></title>
<script type="text/javascript">
function list2() {
var aNode = event.srcElement;
var tdNode = aNode.parentNode;
var divNode = tdNode.getElementsByTagName("div")[0];
var tabNode = document.getElementsByTagName("table")[0];
var divNodes = tabNode.getElementsByTagName("div");
for (var x=0;x<divNodes.length;x++) {
if(divNodes[x] == divNode) {
openClose(divNodes[x])
} else {
divNodes[x].className = "close";
}
}
}
function openClose(divNode) {
if(divNode.className == "open") {
divNode.className = "close";
} else {
divNode.className = "open";
}
}
</script>
<style type="text/css">
table {
border: cadetblue 1px solid;
}
table td {
border: #0000FF 1px solid;
background-color: #00CCFF;
}
table td div {
background-color: #66FFCC;
display: none;
}
table td a:link, table td a:visited {
text-decoration: none;
color: #993300;
}
.open {
display: block;
}
.close {
display: none;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list2()">好友列表</a><br/>
<div>
javascript学习实录之五（节点操作）<br/>
javascript学习实录之五（节点操作）<br/>
javascript学习实录之五（节点操作）<br/>
javascript学习实录之五（节点操作）<br/>
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list2()">好友列表</a><br/>
<div>
javascript学习实录之五（节点操作）<br/>
javascript学习实录之五（节点操作）<br/>
javascript学习实录之五（节点操作）<br/>
javascript学习实录之五（节点操作）<br/>
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list2()">好友列表</a><br/>
<div>
javascript学习实录之五（节点操作）<br/>
javascript学习实录之五（节点操作）<br/>
javascript学习实录之五（节点操作）<br/>
javascript学习实录之五（节点操作）<br/>
</div>
</td>
</tr>
</table>
</body>
</html>

javascript学习实录 之六（div开关闭合效果实例）

javascript学习实录之六（div开关闭合效果实例）