Accordion accordion Effect
One of the common effects of the site, the following is a simplified version, for learning JavaScript basics.
：
Accordion accordion effect-pure JS simplified version
?
| 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 |
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"><title>accordion手风琴效果 - 纯js简化版</title><style type="text/css">*{margin: 0; padding: 0;}#acclist {list-style: none; width: 400px; margin: 10px; padding: 0;}#acclist li { background: #ccc; list-style: none; margin: 0 0 1px 0; padding: 0;}#acclist li h3 {font-size: 13px; color: #fff; background: #666; padding: 5px;cursor:pointer;}#acclist li div { display: none; padding: 5px; height: 80px;}</style><script type="text/javascript">window.onload = function() { varacc = document.getElementById(‘acclist‘); varaccli = acc.getElementsByTagName(‘li‘); for(vari=0; i<accli.length; i++) { accli[i].getElementsByTagName(‘h3‘)[0].index = i; accli[i].getElementsByTagName(‘h3‘)[0].onmouseover = function() { for(vara=0; a<accli.length; a++) { accli[a].getElementsByTagName(‘div‘)[0].style.display = "none"; } if(accli[this.index].getElementsByTagName(‘div‘)[0].style.display == "block") { accli[this.index].getElementsByTagName(‘div‘)[0].style.display = "none"; } else{ accli[this.index].getElementsByTagName(‘div‘)[0].style.display = "block" } } } accli[0].getElementsByTagName(‘div‘)[0].style.display = "block";}</script><body><div> <ul id="acclist"> <li> <div>accdiv01</div> </li> <li> <div>accdiv02</div> </li> <li> <div>accdiv03</div> </li> <li> <div>accdiv04</div> </li> <li> <div>accdiv05</div> </li> <li> <div>accdiv06</div> </li> </ul></div></body> |
