关于javascript的问题

刘芮铭

本帖最后由陈德基于 2012-10-5 11:22 编辑

这段代码是视频里的代码，但是用到自己的机子上的效果和视频里的不一样，主要是上面的<dl>标签内容会覆盖下一个<dl>标签的内容,但是视频里的效果是随着上面<dl>内部内容的显示，下面的<dl>标签内容也随着向下移动。
到底是哪里出了问题?

<script type="text/javascript">
function list()
{
var dtNode = event.srcElement;
var dlNode = dtNode.parentNode;
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>
<dt onclick="list()">上层项目</dt>
<dd>啊恩阿讷嘎不必</dd>
<dd>啊恩阿讷嘎不必</dd>
<dd>啊恩阿讷嘎不必</dd>
<dd>啊恩阿讷嘎不必</dd>
<dd>啊恩阿讷嘎不必</dd>
</dl>
<dl>
<dt onclick="list()">上层项目</dt>
<dd>啊恩阿讷嘎不必</dd>
<dd>啊恩阿讷嘎不必</dd>
<dd>啊恩阿讷嘎不必</dd>
<dd>啊恩阿讷嘎不必</dd>
<dd>啊恩阿讷嘎不必</dd>
</dl>
</body>
</html>

复制代码

谭立文 · 谭立文

用div在外面套一层就好了。你自己把div的style写在外面吧。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
<title>script.html</title>
<script type="text/javascript">
  function list()
  {
      var dtNode = event.srcElement;
      var dlNode = dtNode.parentNode;
      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>
<div style="width:200px;height:120px;">
<dl>
   <dt>上层项目</dt>
   <dd>啊恩阿讷嘎不必</dd>
   <dd>啊恩阿讷嘎不必</dd>
   <dd>啊恩阿讷嘎不必</dd>
   <dd>啊恩阿讷嘎不必</dd>
   <dd>啊恩阿讷嘎不必</dd>
</dl>
</div>
<div style="width:200px;height:120px;">
<dl>
   <dt>上层项目</dt>
   <dd>啊恩阿讷嘎不必</dd>
   <dd>啊恩阿讷嘎不必</dd>
   <dd>啊恩阿讷嘎不必</dd>
   <dd>啊恩阿讷嘎不必</dd>
   <dd>啊恩阿讷嘎不必</dd>
</dl>
</div>
</body>
</html>
  </head>
  <body>
  </body>
</html>

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

关于javascript的问题

评分

1 个回复

评分

黑马骑士勋章