黑马程序员技术交流社区
标题:
dl重叠问题
[打印本页]
作者:
那些人之一
时间:
2014-1-8 19:44
标题:
dl重叠问题
本帖最后由 那些人之一 于 2014-1-10 10:36 编辑
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
dl dd
{
margin:0px;
}
dl
{
height:16px;
}
.open
{
overflow:visible;
}
.close
{
overflow:hidden;
}
</style>
</head>
<script type="text/javascript">
var flag=true;
function list()
{
var oDlNode = document.getElementsByTagName("dl")[0];
if(flag)
{
//2,修改style样式属性中的overflow属性值。
oDlNode.style.overflow ="hidden";
flag=false;
}
else(flag)
{
//2,修改style样式属性中的overflow属性值。
oDlNode.style.overflow ="visible";
flag=true;
}
//alert("lucky man");
}
function list2(index)
{
var oDlNode = document.getElementsByTagName("dl")[index];
if(oDlNode.className=="close")
{
oDlNode.className="open";
}
else
{
oDlNode.className="close"
}
}
</script>
<body>
<dl class="open">
<dt onclick="list2(1)"> 显示条目一</dt>
<dd> 展开列表内容1</dd>
<dd> 展开列表内容2</dd>
<dd> 展开列表内容3</dd>
<dd> 展开列表内容4</dd>
</dl>
<dl class="open">
<dt onclick="list2(2)"> 显示条目2</dt>
<dd> 展开列表内容1</dd>
<dd> 展开列表内容2</dd>
<dd> 展开列表内容3</dd>
<dd> 展开列表内容4</dd>
</dl>
<dl class="open">
<dt onclick="list2(3)"> 显示条目3</dt>
<dd> 展开列表内容1</dd>
<dd> 展开列表内容2</dd>
<dd> 展开列表内容3</dd>
<dd> 展开列表内容4</dd>
</dl>
</body>
</html>
复制代码
QQ截图20140108194338.png
(4.31 KB, 下载次数: 3)
下载附件
如何解决啊
2014-1-8 19:43 上传
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2