本文實(shí)例講述了Javascript通過(guò)overflow控制列表閉合與展開(kāi)的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<!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>通過(guò)overflow控制列表閉合展開(kāi)</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; /*默認(rèn)溢出隱藏*/}dt{ cursor:pointer; /*設(shè)置手型光標(biāo)*/ 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) { //判斷是否是當(dāng)前點(diǎn)擊的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>齊達(dá)內(nèi)</dd> <dd>內(nèi)馬爾</dd> <dd>巴蒂斯圖塔</dd> <dd>梅西</dd></dl><br /><dl> <dt onclick="DisplayList()"> 球星列表2 </dt> <dd>羅納爾多</dd> <dd>貝克漢姆</dd> <dd>齊達(dá)內(nèi)</dd> <dd>內(nèi)馬爾</dd> <dd>巴蒂斯圖塔</dd> <dd>梅西</dd></dl><br /><dl> <dt onclick="DisplayList()"> 球星列表3 </dt> <dd>羅納爾多</dd> <dd>貝克漢姆</dd> <dd>齊達(dá)內(nèi)</dd> <dd>內(nèi)馬爾</dd> <dd>巴蒂斯圖塔</dd> <dd>梅西</dd></dl><br /><dl> <dt onclick="DisplayList()"> 球星列表4 </dt> <dd>羅納爾多</dd> <dd>貝克漢姆</dd> <dd>齊達(dá)內(nèi)</dd> <dd>內(nèi)馬爾</dd> <dd>巴蒂斯圖塔</dd> <dd>梅西</dd></dl><br /><dl> <dt onclick="DisplayList()"> 球星列表5 </dt> <dd>羅納爾多</dd> <dd>貝克漢姆</dd> <dd>齊達(dá)內(nèi)</dd> <dd>內(nèi)馬爾</dd> <dd>巴蒂斯圖塔</dd> <dd>梅西</dd></dl><br /><dl> <dt onclick="DisplayList()"> 球星列表6 </dt> <dd>羅納爾多</dd> <dd>貝克漢姆</dd> <dd>齊達(dá)內(nèi)</dd> <dd>內(nèi)馬爾</dd> <dd>巴蒂斯圖塔</dd> <dd>梅西</dd></dl></div></body></html>希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
