黑马程序员技术交流社区

标题: 求助啊 JavaScript的项目展开闭合效果问题！！ [打印本页]

作者: wodenhaowzg 时间: 2014-2-23 16:12
标题: 求助啊 JavaScript的项目展开闭合效果问题！！
本帖最后由 wodenhaowzg 于 2014-2-23 16:37 编辑

问题如图所示代码和毕老师的一样为什么项目在展开的时候不会自动拉开距离而是重合到一起了郁闷死了啊。。。

有木有大神。。

我把代码附上哪有错误呢

<script type="text/javascript">
function change()
{

      //通过拿事件源本身节点dt，再用parentNode属性获取父类的dl节点即可。
      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>

<body>
<input type="button" value="测试"/>

<dl>
<dt>游戏名称</dt>
<dd>红色警戒</dd>
<dd>魔兽争霸</dd>
<dd>战地4</dd>
<dd>上古卷轴6</dd>
<dd>使命召唤20</dd>
</dl>

<dl>
<dt onclick="change()" >游戏名称</dt>
<dd>红色警戒</dd>
<dd>魔兽争霸</dd>
<dd>战地4</dd>
<dd>上古卷轴6</dd>
<dd>使命召唤20</dd>
</dl>

</body>
</html>

作者: 段光宇 时间: 2014-2-23 17:30
这是属于css样式的问题，在css的.open中加上height=auto就可以了

作者: wodenhaowzg 时间: 2014-2-23 17:43

段光宇发表于 2014-2-23 17:30
这是属于css样式的问题，在css的.open中加上height=auto就可以了

非常有效果，非常感谢。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2