Kaedah Javascript untuk mengawal penutupan dan pengembangan senarai melalui kemahiran overflow

Kaedah Javascript untuk mengawal penutupan dan pengembangan senarai melalui kemahiran overflow_javascript

WBOY

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

asal

1302 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara Javascript mengawal penutupan dan pengembangan senarai melalui limpahan. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

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

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.