A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 刘建宇 黑马帝   /  2012-1-13 23:50  /  2194 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">

.open{ overflow:visible}
.close{ overflow:hidden}
dl{ overflow:hidden; height:16px}
</style>
<script type="text/javascript">
function setvisi()
{
        var dtnode=event.srcElement;
        var dlnode=dtnode.parentNode;
        if(dlnode.className=="close")
        {
                dlnode.className="open";
        }
        else
        {
                dlnode.className="close";
        }
}
</script>
</head>
<body>

<dl>
<dt onclick="setvisi()">上层目录</dt>
<dd>csafdcsasa</dd>
<dd>下层dasdas目录</dd>
<dd>下层asdasdsa目录</dd>
<dd>下层sa目录</dd>
</dl>


<dl>
<dt onclick="setvisi()">上层目录</dt>
<dd>下层xzdcas目录</dd>
<dd>下层目录</dd>
<dd>下层目录</dd>
<dd>下层目录</dd>
</dl>

</body>
</html>
为什么我写的这段html代码在实现展开闭合时,当展开第一个dl目录时会把下面的dl目录给覆盖掉?而不是随着dl的展开而把下一个dl封装的数据下移呢?

2 个回复

倒序浏览
我的测试正常,你用什么浏览器?

评分

参与人数 1黑马币 +2 收起 理由
admin + 2 那你用的什么浏览器啊!

查看全部评分

回复 使用道具 举报
你用到的是css的overflow属性,这个属性定义溢出元素内容区的内容会如何处理。
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
如果你想做展开闭合的效果,建议你用style.display属性来做

       

评分

参与人数 1技术分 +2 收起 理由
admin + 2 赞一个!

查看全部评分

回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马