码迷,mamicode.com
首页 > Web开发 > 详细

JS+JQ手风琴效果

时间:2016-09-21 11:26:52      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

最新在学习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)。

JS+JQ手风琴效果

标签:

原文地址:http://www.cnblogs.com/yy981420974/p/5891918.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!