Javascript通过overflow控制列表闭合与展开的方法

2019-11-20 12:28:13

字体：大中小

来源：转载

供稿：网友

本文实例讲述了Javascript通过overflow控制列表闭合与展开的方法。分享给大家供大家参考。具体实现方法如下：

<!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>通过overflow控制列表闭合展开</title><style type="text/css">div dl{  margin:0;  padding:0;  font-size:14px;}#divMain{  width:500px;  background-color:#22477A;  margin:0 auto;  margin-top:30px;}dl{  width:200px;  background:#A6BCE5;  height:14px; /*和字体大小一样高*/  overflow:hidden; /*默认溢出隐藏*/}dt{  cursor:pointer; /*设置手型光标*/  font-weight:bold;  color:Green;}.open{  height:112px;  overflow:visible;}.close{  height:14px; /*和字体大小一样高*/  overflow:hidden;}</style><script type="text/javascript">function DisplayList() {  var dtNode = window.event.srcElement;  var dlNode = dtNode.parentNode;  var dlNodes = document.getElementsByTagName("dl");  for (var i = 0; i < dlNodes.length; i++) {    if (dlNodes[i] == dlNode) { //判断是否是当前点击的dl      if (dlNodes[i].className == "open") {        dlNodes[i].className = "close";      }      else {        dlNodes[i].className = "open";      }    }    else {      dlNodes[i].className = "close";    }  }}</script></head><body><div id="divMain"><dl>  <dt onclick="DisplayList()">    球星列表1  </dt>  <dd>罗纳尔多</dd>  <dd>贝克汉姆</dd>  <dd>齐达内</dd>  <dd>内马尔</dd>  <dd>巴蒂斯图塔</dd>  <dd>梅西</dd></dl><br /><dl>  <dt onclick="DisplayList()">    球星列表2  </dt>  <dd>罗纳尔多</dd>  <dd>贝克汉姆</dd>  <dd>齐达内</dd>  <dd>内马尔</dd>  <dd>巴蒂斯图塔</dd>  <dd>梅西</dd></dl><br /><dl>  <dt onclick="DisplayList()">    球星列表3  </dt>  <dd>罗纳尔多</dd>  <dd>贝克汉姆</dd>  <dd>齐达内</dd>  <dd>内马尔</dd>  <dd>巴蒂斯图塔</dd>  <dd>梅西</dd></dl><br /><dl>  <dt onclick="DisplayList()">    球星列表4  </dt>  <dd>罗纳尔多</dd>  <dd>贝克汉姆</dd>  <dd>齐达内</dd>  <dd>内马尔</dd>  <dd>巴蒂斯图塔</dd>  <dd>梅西</dd></dl><br /><dl>  <dt onclick="DisplayList()">    球星列表5  </dt>  <dd>罗纳尔多</dd>  <dd>贝克汉姆</dd>  <dd>齐达内</dd>  <dd>内马尔</dd>  <dd>巴蒂斯图塔</dd>  <dd>梅西</dd></dl><br /><dl>  <dt onclick="DisplayList()">    球星列表6  </dt>  <dd>罗纳尔多</dd>  <dd>贝克汉姆</dd>  <dd>齐达内</dd>  <dd>内马尔</dd>  <dd>巴蒂斯图塔</dd>  <dd>梅西</dd></dl></div></body></html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：javascript制作的滑动图片菜单

下一篇：javascript实现日期按月份加减