四川盐亭网站制作公司

js如何实现手风琴效果-创新互联

这篇文章主要介绍js如何实现手风琴效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

在奈曼等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站设计、成都网站设计 网站设计制作按需制作,公司网站建设,企业网站建设,成都品牌网站建设,营销型网站,外贸网站制作,奈曼网站建设费用合理。

效果图:

js如何实现手风琴效果

图（1）初始图

js如何实现手风琴效果

图（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
    • 
 
 
    
 
    
 
    后台脚本
    
 
      
 
    • PHP
      • 
 
    • ASP.net
      • 
 
    • JSP
      • 
 
    
 
    
 
    
 
    前端框架
    
 
      
 
    • Extjs
      • 
 
    • Esspress
      • 
 
    • YUI
      • 
 
    
 
    
 

    以上是“js如何实现手风琴效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！

    另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


    分享名称：js如何实现手风琴效果-创新互联
    当前URL：http://scyanting.com/article/jcddo.html

    其他资讯