首页 > 代码库 > JS+JQ手风琴效果

JS+JQ手风琴效果

2024-08-14 04:02:21   225人阅读

最新在学习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手风琴效果


联系
我们