最新在學習JS寫一些實用的小玩意——手風琴
CSS樣式：
1 <style type="text/css"> 2 * { 3 margin: 0px; 4 border: 0px; 5 padding: 0px; 6 } 7 8 .leftli { 9 float: left; 10 width: 200px; 11 background: #3D4444; 12 } 13 14 ul li { 15 display: block; 16 line-height: 25px; 17 width: 200px; 18 height: 25px; 19 list-style-type: none; 20 border-collapse: collapse; 21 font-size: 15px; 22 color: #DBDBDB; 23 margin-left: 20px; 24 } 25 26 ul li:hover { 27 background: #FFFFFF; 28 color: #000000; 29 cursor: pointer; 30 height: 40px; 31 line-height: 40px; 32 font-size: 22px; 33 } 34 35 a { 36 display: block; 37 line-height: 50px; 38 width: 200px; 39 height: 50px; 40 list-style-type: none; 41 font-size: 30px; 42 left: 5px; 43 color: #F9F9F9; 44 font-size: bold; 45 } 46 47 a:hover { 48 background: #FFFFFF; 49 color: #2FA8EC; 50 cursor: pointer; 51 height: 65px; 52 line-height: 65px; 53 font-size: 40px; 54 text-align: center; 55 } 60 </style>
HTML布局：
1 <body> 2 <div class="leftli"> 3 <div> 4 <a>First</a> 5 <ul> 6 <li>First One</li> 7 <li>First Two</li> 8 </ul> 9 <a>Second</a> 10 <ul> 11 <li>Second One</li> 12 <li>Second Two</li> 13 </ul> 14 <a>Third</a> 15 <ul> 16 <li>Third One</li> 17 <li>Third Two</li> 18 </ul> 19 <a>Fourth</a> 20 <ul> 21 <li>Fourth One</li> 22 <li>Fourth Two</li> 23 </ul> 24 <a>Fifth</a> 25 <ul> 26 <li>Fifth One</li> 27 <li>Fifth Two</li> 28 </ul> 29 <a>Sixth</a> 30 <ul> 31 <li>Sixth One</li> 32 <li>Sixth Two</li> 33 </ul> 34 </div> 35 </div> 36 </body>
引用的JS
1 <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
JS關鍵代碼
1 <script type="text/javascript"> 2 $(function() { 3 //設置DIV的高度跟隨屏幕變化而變化，類似於自適應 4 $(".leftli").height(document.body.scrollHeight); 5 //隱藏除第一個元素以外的所有元素 6 $(".leftli ul:gt(0)").hide();
7 }) 8 //bind()為.leftli a的a生成點擊事件 9 $(".leftli a").bind("click", function() { 10 //.netx("li")獲取同級的下一個li元素 11 //slideToggle(300)展開/關閉當前被點擊的ul元素，300為速度，除了可以是數字還可以"slow"、"normal"、"fast" 12 //siblings("ul")遍歷所有的ul元素 13 //slideUp(300)隱藏已經被展開的其他ul元素，300為速度，除了可以是數字還可以"slow"、"normal"、"fast" 14 $(this).next("ul").slideToggle(300).siblings("ul").slideUp(300); 15 }) 16 </script>
JS大致思路就是先獲取當前被點擊的a元素，然后展開a元素下的ul元素，再遍歷所有的ul元素，再將已展開的ul元素隱藏，這樣就完成了手風琴效果。
手風琴效果如果有不完善的地方，希望各位JS/JQ大神多多指教，大家共同學習，送上Demo下載。
文章可隨意轉載，轉載請注明出處(http://www.cnblogs.com/yy981420974/p/5891918.html)。