javascript：折叠菜单详解编程语言

最近做网页用到了折叠菜单，在网上搜索了一番后还不错，现在放到自己的博客中。

下面是自己改的一个折叠菜单，导入三个js文件就可以执行啦。

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 

 html xmlns="http://www.w3.org/1999/xhtml" 

 head 

 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 

 title Untitled Document /title 

 script src="prototype.lite.js" type="text/javascript" /script 

 script src="moo.fx.js" type="text/javascript" /script 

 script src="moo.fx.pack.js" type="text/javascript" /script 

 style 

 body { 

 font:12px Arial, Helvetica, sans-serif; 

 color: #000; 

 #container { 

 width: 200px; 

 H1 { 

 font-size: 11px; 

 margin: 0px; 

 width: 200px; 

 cursor: pointer; 

 height: 22px; 

 line-height: 20px; 

 H1 a { 

 display: block; 

 padding-top: 1px; 

 padding-right: 8px; 

 padding-bottom: 0px; 

 padding-left: 8px; 

 width: 500px; 

 color: #000; 

 height: 22px; 

 text-decoration: none; 

 moz-outline-style: none; 

 background-image: url(title.gif); 

 background-repeat: repeat-x; 

 .content{ 

 padding-left: 8px; 

 /style 

 /head 

 body 

 div id="container" 

 !-- 第一个菜单块-- 

 H1 A href="javascript:void(0)" 门户网站 /a /H1 

 div 

 p a href=http://www.baidu.com/ 进入百度 /a /p 

 p a href=http://www.yahoo.com/ 进入雅虎 /a /p 

 /div 

 !-- 第二个菜单块-- 

 H1 A href="javascript:void(0)" 购物天堂 /a /H1 

 div 

 p a href=http://www.amazon.cn/ 进入亚马逊 /a /p 

 p a href=http://www.taobao.com/ 进入淘宝 /a /p 

 /div 

 !-- 第三个菜单块-- 

 H1 A href="javascript:void(0)" 聊天室 /a /H1 

 div 

 p a href=http://web.qq.com/ QQ /a /p 

 p a href=https://webim.feixin.10086.cn/login.aspx 飞信 /a /p 

 /div 

 /div 

 script type="text/javascript" 

 //定义contents 数组为所有将要显示的内容 

 var contents = document.getElementsByClassName(content); 

 //定义toggles 数组为所有标题，也是可点击展开的按钮 

 var toggles = document.getElementsByClassName(title); 

 //调用moofx JS库 

 var myAccordion = new fx.Accordion( 

 toggles, contents, {opacity: true, duration: 400} //opacity确定是否有alpha透明变化,duration确定动作所有事件 

 myAccordion.showThisHideOpen(contents[0]); //默认打开第一个内容 

 /script 

 /body 

 /html 

  效果图：

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/17529.html