Javascript通过overflow控制列表闭合与展开的方法
内容摘要
本文实例讲述了Javascript通过overflow控制列表闭合与展开的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
文章正文
本文实例讲述了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程序设计有所帮助。
代码注释