javaScript中的文字开关闭合效果文字重叠在一起

刘凯

本帖最后由黄基焜于 2013-6-9 10:19 编辑

<!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>无标题文档</title>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function change()
{
var dtNode = event.srcElement;
var dlnode = dtNode.parentNode;
//alert(divNode.nodeName);
if(dlnode.className == "open")
dlnode.className = "close"
else
dlnode.className = "open"
}
</script>
<style type="text/css">
.open{
overflow:visible;
}
.close{
overflow:hidden;
}
dl{
overflow:hidden;
height:16px;
}
</style>
</head>
<body>
<dl onclick="change()">
<dt>上层标题上层标题</dt>
<dd>下层标题下层标题下层标题</dd>
<dd>下层标题下层标题下层标题</dd>
<dd>下层标题下层标题下层标题</dd>
<dd>下层标题下层标题下层标题</dd>
</dl>
<dl onclick="change()">
<dt>上层标题上层标题</dt>
<dd>下层标题下层标题下层标题</dd>
<dd>下层标题下层标题下层标题</dd>
<dd>下层标题下层标题下层标题</dd>
<dd>下层标题下层标题下层标题</dd>
</dl>
</body>
</html>

复制代码

效果图如下：文字为什么会叠在一起啊？毕老师的会自动延伸的

刘凯 · 刘凯

我当时也是出现这个问题，后来记得是放弃了overflow 改用了display属性来完成的这个效果等高手解答

sweethui1 · sweethui1

我也是出现这个问题，后来我把 .open 里的高度设置为自动就可以了。代码如下：
.open{
height:auto;
overflow:visible
}

.close
{

overflow:hidden;
}

dl{
height:16px;
overflow:hidden;
}

黄基焜 · 黄基焜

也就只能这样了

帐号		自动登录	找回密码
密码			加入黑马

3 个回复