当前页面: 开发资料首页 → Javascript 专题 → JavaScript应用实例：网页折叠菜单

JavaScript应用实例：网页折叠菜单

摘要: JavaScript应用实例：网页折叠菜单

<tr> <td>

js库出自：http://moofx.mad4milk.net/（Moofx 超轻量级javascrip效果类库）

先点击这里看下效果吧

用法:

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:

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吧

下载

</td> </tr> </table>
↑返回目录
前一篇: 如何禁止flash动画的自动跳转
后一篇: 奇招 Javascript暴虐查找法