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

本文实例讲述了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） { //判断是否是当前点击的dlif （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程序设计有所帮助。