（7）展开闭合列表：布局overflow在列表中应用
<title>无标题文档</title>
<style type="text/css">
dl dd/*关联选择器*/
{
margin:0px;
}
dl{
height:16px;
overflow:hidden;/*只保留“显示条目一”，其他隐藏*/
}
.open
{
overflow:visible;
}
.close
{
overflow:hidden;
}
</style>
</head>
<body>
<script type="text/javascript">
/* var flag=true;
function list()
{
//获取要处理的节点，dl
var node=document.getElementsByTagName("dl")[0];
if(flag)
{
node.style.overflow="visible";
flag=false;
}
else
{
node.style.overflow="hidden";
flag=true;
}
}
*/
function list2()
{
//1,获取dl节点
var node=document.getElementsByTagName("dl")[0];
//2，设置dl的className属性值,通过判断属性值来切换
if(node.className=="open")
node.className="close";
else
node.className="open";
}
//list1,2都是一个列表的情况，但是实际开发，通常一个网页中含有多个列表
function list3(index)
{
//这种方式中列表的位置不能调换，否则会出现展开错误列表的情况.因为Dom解析是按照列表从前到后解析的
//不安全
var node=document.getElementsByTagName("dl")[index];
if(node.className=="open")
node.className="close";
else
node.className="open";
}
function list4(node)
{
//alert(node.nodeName);//得到DT
var fnode=node.parentNode;
if(fnode.className=="open")
fnode.className="close";
else
fnode.className="open";
}
//在多个列表下，一次只需要展开一个列表，关闭其他开启的列表
/*思路：1，获取所有dl节点
2，遍历这些节点，只对当前的dl进行展开或者闭合操作，其他节点，都进行闭合操作
*/
function list5(node)
{
var oDlnode=node.parentNode;//获取当前的dl节点
var collDlNodes=document.getElementsByTagName("dl");
for(var i=0;i<collDlNodes.length;i++)
{
if(collDlNodes[i]==oDlnode)
{
if(oDlnode.className=="open")
oDlnode.className="close";
else
oDlnode.className="open";
}
else
{
collDlNodes[i].className="close";
}
}
}
</script>
<dl class="close">
<dt onclick="list5(this)">显示条目一</dt>
<dd>展示列表内容1</dd>
<dd>展示列表内容1</dd>
<dd>展示列表内容1</dd>
</dl>
<dl class="close">
<dt onclick="list5(this)">显示条目二</dt>
<dd>展示列表内容2</dd>
<dd>展示列表内容2</dd>
<dd>展示列表内容2</dd>
</dl>
<dl class="close">
<dt onclick="list5(this)">显示条目三</dt>
<dd>展示列表内容3</dd>
<dd>展示列表内容3</dd>
<dd>展示列表内容3</dd>
</dl>
</body>
</html>
