最近做网页用到了折叠菜单，在网上搜索了一番后还不错，现在放到自己的博客中。
参考网页：http://www.blueidea.com/tech/web/2006/3824.asp
具体demo下载：http://www.blueidea.com/articleimg/2006/07/3824/demo.zip
下面是自己改的一个折叠菜单，导入三个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>
效果图：
时间： 2024-08-01 08:04:51