成都创新互联网站制作重庆分公司

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如何实现手风琴效果-创新互联
    文章网址:http://cxhlcq.com/article/jcddo.html

    其他资讯

    在线咨询

    微信咨询

    电话咨询

    028-86922220(工作日)

    18980820575(7×24)

    提交需求

    返回顶部