这篇文章主要介绍js如何实现手风琴效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联建站主打移动网站、做网站、成都网站设计、网站改版、网络推广、网站维护、域名注册、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。
效果图:
图（1）初始图
图（2）点击展开效果
代码如下：
Document
*{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;}
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";
}
}
}
}
Web前端
JavaScript
DIV+CSS
JQuary
