用Javascript实现的折叠菜单

用法:

1.添加JS库

CODE:<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>

2.建立xhtml结构:

CODE:

<div id="container">
　　<H1 class="title"><A href="javascript:void(0)">(1)这里放标题</H1>
　　<div class="content">
　　　　<p>(1)这里放内容</p>
　　</div>
　　<H1 class="title"><A href="javascript:void(0)">(2)这里放标题</H1>
　　<div class="content">
　　　　<p>(2)这里放内容</p>
　　</div><H1 class="title"><A href="javascript:void(0)">(3)这里放标题</H1>
　　<div class="content">
　　　　<p>(3)这里放内容</p>
　　</div>
</div>

3.调用JS:

CODE:

<script type="text/javascript">
　　//定义contents 组数为所有将要显示的内容
　　var contents = document.getElementsByClassName('content');
　　//定义contents 组数为所有标题，也是可点击展开的按钮
　　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>

完成.

简单而且效果不错吧

如果还要界面好看点，自已定义下CSS吧