JS+JQ手风琴效果

Posted 2020-08-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS+JQ手风琴效果相关的知识，希望对你有一定的参考价值。

最新在学习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手风琴效果的主要内容，如果未能解决你的问题，请参考以下文章

jQuery手风琴菜单跪求图面上面这种JQ手风琴效果，带排行的。。。