<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
dl dd{
margin:0px;
}
dl{
/*使dl只能显示一行文字的高度，以隐藏其要展开的部分*/
height:16px;
}
/*
预定义一些样式，类选择器，便于给标签进行样式的动态加载。
*/
.open{
/*设置显示超出元素区域的内容*/
overflow:visible;;
}
.close{
/*设置隐藏超出元素区域的内容*/
overflow:hidden;
}
dl dt{
color:#ff8000;
}
</style>
</head>
<body>
<script type="text/javascript">
/*
* 在多个列表下，一次只需要展开一个列表其他列表都关闭。
* 怎么保证开一个，而关其他呢？
* 思路：
* 1，获取所有的dl节点。
* 2，遍历这些节点，只对当前的dl进行展开或者闭合操作，其他节点都进行闭合操作。
*/
function list(node){
//获取对当前的dl节点。
var oDlNode = node.parentNode;
//获取所有的dl节点。
var collDlNodes = document.getElementsByTagName("dl");
//遍历所有dl。
for(var x=0; x<collDlNodes.length; x++){
if(collDlNodes[x]==oDlNode){
if(oDlNode.className == "close"){
oDlNode.className = "open";
}else{
oDlNode.className = "close";
}
}else{
collDlNodes[x].className = "close";
}
}
}
</script>
<dl class="close">
<dt onclick="list(this)">显示条目一</dt>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
</dl>
<dl class="close">
<dt onclick="list(this)">显示条目二</dt>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
</dl>
<dl class="close">
<dt onclick="list(this)">显示条目三</dt>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
</dl>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
dl dd{
margin:0px;
}
dl{
/*使dl只能显示一行文字的高度，以隐藏其要展开的部分*/
height:16px;
}
/*
预定义一些样式，类选择器，便于给标签进行样式的动态加载。
*/
.open{
/*设置显示超出元素区域的内容*/
overflow:visible;;
}
.close{
/*设置隐藏超出元素区域的内容*/
overflow:hidden;
}
dl dt{
color:#ff8000;
}
</style>
</head>
<body>
<script type="text/javascript">
/*
* 在多个列表下，一次只需要展开一个列表其他列表都关闭。
* 怎么保证开一个，而关其他呢？
* 思路：
* 1，获取所有的dl节点。
* 2，遍历这些节点，只对当前的dl进行展开或者闭合操作，其他节点都进行闭合操作。
*/
function list(node){
//获取对当前的dl节点。
var oDlNode = node.parentNode;
//获取所有的dl节点。
var collDlNodes = document.getElementsByTagName("dl");
//遍历所有dl。
for(var x=0; x<collDlNodes.length; x++){
if(collDlNodes[x]==oDlNode){
if(oDlNode.className == "close"){
oDlNode.className = "open";
}else{
oDlNode.className = "close";
}
}else{
collDlNodes[x].className = "close";
}
}
}
</script>
<dl class="close">
<dt onclick="list(this)">显示条目一</dt>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
</dl>
<dl class="close">
<dt onclick="list(this)">显示条目二</dt>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
</dl>
<dl class="close">
<dt onclick="list(this)">显示条目三</dt>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
</dl>
</body>
</html>
