This example describes the way JavaScript is closed and expanded by overflow control lists. Share to everyone for your reference. The implementation methods are as follows:
?
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 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 5, 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 11 9 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> through overflow control list closure expand </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; /* and font size as high * * OVERFLOW:HIDDEN; /* Default overflow hidden/} dt {cursor:pointer;/* Set hand cursor/font-weight:bold; Color:green}. Open {height:112px; overflow:visible;}. C Lose {height:14px/* and font size as high */Overflow:hidden} </style> <script type= "Text/javascript" > function Displaylist () {var dtnode = window.event.srcElement; var dlnode = Dtnode.parentnode; var dlnodes = Document.getelementsby TagName ("DL"); for (var i = 0; i < dlnodes.length i++) {if (dlnodes[i] = = Dlnode{//Determine if the currently clicked 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 ()" > Star List 1 </dt> <dd> ronaldo </dd> <dd> Beckham </dd> <dd> Zidane </dd> <dd> Neymar </dd > <dd> batistuta </dd> <dd> Macy's </dd> </dl> <br/> <dl> <dt onclick= " Displaylist () "> Stars List 2 </dt> <dd> ronaldo </dd> <dd>, Beckham </dd> <dd> Zidane </dd> <dd> Neymar </dd> <dd> batistuta </dd> <dd> macy </dd> </dl> <br/> <dl> < DT onclick= "displaylist ()" > Player list 3 </dt> <dd> ronaldo </dd> <dd> Beckham </dd> <dd> Zidane </dd> <dd> Neymar </dd> <dd> batistuta </dd> <dd> macy </dd> </dl> <br/> < dl> <dt onclick= "DIsplaylist () "> Stars List 4 </dt> <dd> ronaldo </dd> <dd>, Beckham </dd> <dd> Zidane </dd> <dd> Neymar </dd> <dd> batistuta </dd> <dd> macy </dd> </dl> <br/> <dl> < DT onclick= "displaylist ()" > Player list 5 </dt> <dd> ronaldo </dd> <dd> Beckham </dd> <dd> Zidane </dd> <dd> Neymar </dd> <dd> batistuta </dd> <dd> macy </dd> </dl> <br/> < dl> <dt onclick= "displaylist ()" > Stars list 6 </dt> <dd> ronaldo </dd> <dd> Beckham </dd> < Dd> Zidane </dd> <dd> Neymar </dd> <dd> Batistuta </dd> <dd> Macy's </dd> </dl> </ Div> </body> </html> |
The
wants this article to help you with your JavaScript programming.