最新在学习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大神多多指教，大家共同学习。
文章可随意转载，转载请注明出处(http://www.cnblogs.com/yy981420974/p/5891918.html)。
时间： 2024-10-15 12:34:08