JS折叠菜单

用法:

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吧！

注：复制代码时请把“〈”换成"<"