js实现可折叠展开的手风琴菜单效果

本文实例讲述了射流研究…实现可折叠展开的手风琴菜单效果。分享给大家供大家参考。具体如下：

这是一款可折叠展开的菜单，手风琴菜单，运用半铸钢钢性铸铁(铸造半钢)与Java脚本语言技术实现的合拢与伸展的网页菜单，代码简洁，来自老外的代码作品，希望大家喜欢。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-hidden-show-sfq-style-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题折叠展开的菜单/title/header dystyle类型=' text/CSS ' .menutitle { cursor:pointer边距-底部： 5px背景-颜色： # ECE CFF；color: # 000000宽度宽度：140pxpadding:2px文本对齐：居中；字体粗细：加粗；/*/*/border:1px固体# 000000;/* */}.子菜单{边距-底部：0.5 em；}/style脚本类型=' text/JavaScript ' if(文档。getelementbyid){//动态驱动器。com更改文档。编写(' style type=' text/CSS ' \ n ')文档。写(' .子菜单{ display : none } \ n’)文档。write('/style \ n ')}函数切换菜单(obj){ if(document。getelementbyid){ var El=document。getelementbyid(obj)；var ar=文档。getelementbyid(' master div ').getElementsByTagName(' span ')；//动态驱动器。com更改if(El。风格。展示！=' block '){//动态驱动器。com变化为(var I=0；长度；i ){if (ar[i].' className='子菜单)//动态驱动。com changar[I]。风格。显示='无'；} El。风格。display=' block} else { El。风格。显示='无'；} } }/脚本！-将所有菜单保留在master div-div id=' master div ' div class=' Menu title ' onclick=' switch Menu(' sub 1 ')' Site Menu/div span class=' sub ' id=' sub 1 '-a href=' # '新增内容/abr- a href='# '热门内容/abr- a href='# '修订脚本/abr- a href='# '更多区域/a/span div class=' Menu title ' on click=' switch Menu(' sub 2 ')我们/ABR-a href=' http://www .酷文本。酷文本/ABR/span/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。