js实现简单的手风琴效果
效果图:
图（1）初始图
图（2）点击展开效果
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;font-size:12px;list-style:none;} .menu{margin:50px auto;width:210px;border:1px solid #ccc;} .menu p{height:25px;line-height:25px;background:#eee;font-weight:bold;border-bottom:1px solid #ccc;text-indent:20px;cursor:pointer;} .menu div ul{display:none;} .menu li{height:24px;line-height:24px;text-indent:20px;} </style> <script type="text/javascript"> window.onload=function(){ var menu=document.getElementById("menu"); var ps=menu.getElementsByTagName("p"); var uls=menu.getElementsByTagName("ul"); for(var i in ps){ ps[i].id=i; ps[i].onclick=function(){ var u=uls[this.id]; if (u.style.display=='block'){ u.style.display="none"; }else{ u.style.display="block"; } } } } </script> </head> <body> <div class="menu" id="menu"> <div> <p>Web前端</p> <ul style="display:block"> <li>JavaScript</li> <li>DIV+CSS</li> <li>JQuary</li> </ul> </div> <div> <p>后台脚本</p> <ul> <li>PHP</li> <li>ASP.net</li> <li>JSP</li> </ul> </div> <div> <p>前端框架</p> <ul> <li>Extjs</li> <li>Esspress</li> <li>YUI</li> </ul> </div> </div> </body> </html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
本文向大家介绍简单实现jQuery手风琴效果，包括了简单实现jQuery手风琴效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery实现手风琴效果的具体代码，供大家参考，具体内容如下 js代码： css代码： html代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍JS实现手风琴特效，包括了JS实现手风琴特效的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JS实现手风琴特效的具体代码，供大家参考，具体内容如下 效果图 JS代码 CSS代码 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍Html5 js实现手风琴效果，包括了Html5 js实现手风琴效果的使用技巧和注意事项，需要的朋友参考一下 使用H5实现横向的手风琴功能，供大家参考，具体内容如下 下载链接：H5实现手风琴 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍JS实现图片手风琴效果，包括了JS实现图片手风琴效果的使用技巧和注意事项，需要的朋友参考一下 ''推拉门''动效也可以称作"手风琴"效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。 推拉门收缩状态.png "推拉门"展开状态.png "推拉门"实现方法一：改变图片宽度 html+css代
-
本文向大家介绍jquery超简单实现手风琴效果的方法，包括了jquery超简单实现手风琴效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery超简单实现手风琴效果的方法。分享给大家供大家参考。核心代码如下： 希望本文所述对大家的jQuery程序设计有所帮助。
-
本文向大家介绍纯js实现手风琴效果代码，包括了纯js实现手风琴效果代码的使用技巧和注意事项，需要的朋友参考一下 我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发，这不仅节约了时间，也让效率大大的提高，并让公司的效益增加，何乐而不为呢？ 但是，这也会有一定的缺点，比如jQ比js慢，尤其在大型项目中就会显现出来，下面我用原生js实现一个简单的手风琴效果效果。 HTML代码如下