萬盛學電腦網 >> 腳本專題 >> javascript >> Javascript通過overflow控制列表閉合與展開的方法
Javascript通過overflow控制列表閉合與展開的方法
本文實例講述了Javascript通過overflow控制列表閉合與展開的方法。分享給大家供大家參考。具體實現方法如下：
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 <!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排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved