Javascript-Methode zur Steuerung des Schließens und Erweiterns von Listen durch overflow

Javascript-Methode zur Steuerung des Schließens und Erweiterns von Listen durch overflow_javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:58:57

Original

1300 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie Javascript das Schließen und Erweitern von Listen durch Überlauf steuert. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

<!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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.