[效果]JS折叠菜单-使用方法
来源:互联网 发布:阿里云服务器部署教程 编辑:程序博客网 时间:2024/05/17 01:24
用法:
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折叠菜单-使用方法
- [效果]JS折叠菜单-moo.fx.js
- [效果]JS折叠菜单-prototype.lite.js
- js tree树形折叠菜单效果
- moo.fx.js之JS折叠菜单-使用方法
- [效果]JS折叠菜单-moo.fx.pack.js
- Js折叠菜单
- js 折叠导航菜单
- js折叠菜单
- js折叠效果
- JS 左侧折叠效果
- jQuery实现的简单折叠菜单(折叠面板)效果代码
- 用Javascript实现菜单折叠效果
- 用javascript实现菜单折叠的效果
- Jquery页面导航(菜单悬停,折叠效果)
- 折叠菜单效果,ExpandableListView用法(精)
- WindowsPhone8 ListBox 实现手风琴折叠菜单效果
- js小技巧 js实现折叠效果
- MSN的监听与反监听
- 去掉右键显卡选项
- 一位项目经理经验总结
- MFC vs GTK+
- Visual C#学习笔记- 接口/Interface
- [效果]JS折叠菜单-使用方法
- ORACLE 中TO_DATE()的用法
- [效果]JS折叠菜单-moo.fx.js
- [效果]JS折叠菜单-moo.fx.pack.js
- [转帖]IT人不可不听的10个故事
- [效果]JS折叠菜单-prototype.lite.js
- delphi关于线程安全问题
- Beginning C# Objects从概念到代码——1.13 代码块和变量作用范围
- CSDN读书-态度决定一切