Hopes

效果]JS折叠菜单-使用方法 (moo.fx)

效果]JS折叠菜单-使用方法

2006-12-13 12:42 1166人阅读 评论(0) 收藏 举报

用法:

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吧
注:js文件内容参见本人blog内其它相关文章.
分享到：
上一篇：js二级联动菜单
下一篇：[效果]JS折叠菜单-moo.fx.js

posted on 2012-09-14 16:37 ** 阅读(1872) 评论(0)  编辑  收藏