最近做网页用到了折叠菜单，在网上搜索了一番后还不错，现在放到自己的博客中。
下面是自己改的一个折叠菜单，导入三个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 class="title"><A href="javascript:void(0)">门户网站</a></H1> <div class="content"> <p><a href=http://www.baidu.com/>进入百度</a></p> <p><a href=http://www.yahoo.com/>进入雅虎</a></p> </div> <!-- 第二个菜单块--> <H1 class="title"><A href="javascript:void(0)">购物天堂</a></H1> <div class="content"> <p><a href=http://www.amazon.cn/>进入亚马逊</a></p> <p><a href=http://www.taobao.com/>进入淘宝</a></p> </div> <!-- 第三个菜单块--> <H1 class="title"><A href="javascript:void(0)">聊天室</a></H1> <div class="content"> <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