Dom编程（树收缩效果）

来源：互联网发布：极域电子教室软件编辑：程序博客网时间：2024/05/19 13:24

收缩列表，现在已不适用：

<!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=UTF-8" /><title>tree</title><script type="text/javascript">function list(){var dtNode = event.srcElement;var dlNode = dtNode.parentNode;if(dlNode.className == "open"){dlNode.className = "close";}else{dlNode.className = "open";}}</script><style type="text/css">dl{height:16px;overflow:hidden;}.open{overflow:visible;}.close{overflow:hidden;}</style></head><body><dl><dt onclick="list()">上层项目 上层项目</dt><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd></dl><dl><dt onclick="list()">上层项目 上层项目</dt><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd></dl><dl><dt onclick="list()">上层项目 上层项目</dt><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd></dl><dl><dt onclick="list()">上层项目 上层项目</dt><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd></dl></body></html>

火狐浏览器不支持，IE和Safari也是这副德行：

不知道这是哪一年的视频，那时候老毕还用的是IE4.0

一个打开其余关闭：

<!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=UTF-8" /><title>tree</title><script type="text/javascript">function list(){var dtNode = event.srcElement;var dlNode = dtNode.parentNode;var dlNodes = document.getElementsByTagName("dl");for(var x=0; x<dlNodes.length; x++){if(dlNodes[x] == dlNode){if(dlNode.className == "open"){dlNode.className = "close";}else{dlNode.className = "open";}}else{dlNodes[x].className = "close";}}}</script><style type="text/css">dl{height:16px;overflow:hidden;}.open{overflow:visible;}.close{overflow:hidden;}</style></head><body><dl><dt onclick="list()">上层项目 上层项目</dt><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd></dl><dl><dt onclick="list()">上层项目 上层项目</dt><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd></dl><dl><dt onclick="list()">上层项目 上层项目</dt><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd></dl><dl><dt onclick="list()">上层项目 上层项目</dt><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd><dd>凤凰山佛问我说从开始佛我就发生了胜利</dd></dl></body></html>

用 table 做的收缩列表：

<!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=UTF-8" /><title>tablelist收缩效果</title><style type="text/css">table{empty-cells:show;border:thin solid #06F;}table td{border:solid thin #36F;width:128px;}a:link, a:visited{text-decoration:none;color:#000;}table td{background-color:#096;}td div{background-color:#3CF;display:none;}.close{display:none;}.open{display:block;}</style><script type="text/javascript">function list1(){var aNode = event.srcElement;var tdNode = aNode.parentNode;var divNode = tdNode.getElementsByTagName("div")[0];if(divNode.className == "open"){divNode.className = "close";}else{divNode.className = "open";}}function list(){var aNode = event.srcElement;var tdNode = aNode.parentNode;var divNode = tdNode.getElementsByTagName("div")[0];var tableNode = document.getElementsByTagName("table")[0];var divNodes = tableNode.getElementsByTagName("div");for(var x=0; x<divNodes.length; x++){if(divNodes[x] == divNode){if(divNode.className == "open"){divNode.className = "close";}else{divNode.className = "open";}}else{divNodes[x].className = "close";}}}</script></head><body><table><tr>    <td>            <a href="javascript:void(0)" onclick="list()">我的好友</a>            <div>            这那繁华的风景看<br />            这那繁华的风景看<br />            这那繁华的风景看<br />            这那繁华的风景看<br />            这那繁华的风景看<br />            </div>        </td>    </tr>        <tr>    <td>            <a href="javascript:void(0)" onclick="list()">我的好友</a>            <div>            这那繁华的风景看<br />            这那繁华的风景看<br />            这那繁华的风景看<br />            这那繁华的风景看<br />            这那繁华的风景看<br />            </div>        </td>    </tr>        <tr>    <td>            <a href="javascript:void(0)" onclick="list()">我的好友</a>            <div>            这那繁华的风景看<br />            这那繁华的风景看<br />            这那繁华的风景看<br />            这那繁华的风景看<br />            这那繁华的风景看<br />            </div>        </td>    </tr>        </table></body></html>

Safari 浏览器支持，Mac下的火狐不支持。

0 0

Dom编程（树 收缩效果）

收缩列表，现在已不适用：

一个打开其余关闭：

用 table 做的收缩列表：

Dom编程（树收缩效果）