[效果]JS折叠菜单-使用方法 (Moo.Fx)
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-06-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>
最近用到了这个,记录一下。
[效果]JS折叠菜单-使用方法 (Moo.Fx)的更多相关文章
- 顶 兼容各种浏览器js折叠菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
- slideToggle+slideup实现手机端折叠菜单效果
折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等, ...
- 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- js矩阵菜单或3D立体预览图片效果
js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...
- 前台JS(Jquery)调用后台方法 无刷新级联菜单示例
前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...
- JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...
- JS+CSS打造三级折叠菜单,自动收缩其它级 js
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
随机推荐
- HDU 4627 The Unsolvable Problem 2013 Multi-University Training Contest 3
给你一个数 n ( 2 <= n <= 109 ),现在需要你找到一对数a, b (a + b = n),并且使得LCM(a, b)尽可能的大,然后输出最大的 LCM(a, b). (为什 ...
- mysql 数据库自增id 的总结
有一个表StuInfo,里面只有两列 StuID,StuName其中StuID是int型,主键,自增列.现在我要插入数据,让他自动的向上增长,insert into StuInfo(StuID,Stu ...
- RAC 之 RMAN 备份
这篇主要介绍的是RAC 环境下的RMAN 备份. 关于Oracle 备份与恢复的一些理论知识参考我的Blog: Oracle 备份 与 恢复 概述 http://blog.csdn.net ...
- 【转】谈一谈PHP字串清除空格函数不安全
清除空格的方法是不安全的,部分原因是因为字符中的空格非常多,例如 "addslashes的问题在 于黑客 可以用0xbf27来代替单引号,而addslashes只是将0xbf27修改为0xb ...
- 模式自由(Schema-free)和数据存储的非格式化趋势
最近遐想,数据存储的非格式化趋势. 格式化表格到自由的XML存储 数年以前,多家数据库厂商开始XML数据库存储.XML数据作为一种自描述的半结构化数据为Web的数据管理提供了新的数据模型,如果将XML ...
- YII Framework学习教程-YII的异常处理
异常无处不在,作为程序员,活着就是为了创造这些异常,然后修复这些异常而存在的.YII框架封装了PHP的异常,让异常处理起来更简单. 使用 YII处理错误和异常的配置方法: 你可以在入口文件中定义YII ...
- 插件五之滚动条jquery.slimscroll.js
前言 slimscroll.js用于模拟传统的浏览器滚动条(竖向),原理为原内容内置于一个仅可视区域显示层,使用2个div层用于模拟滚动条和滚动条背景轨道监听滚动条div高度变化来控制内容层位置(猜测 ...
- IOS播放音乐和音效
1.播放音效 1.1 首先获取到音效文件路径 NSString *path = [[NSBundle mainBundle] pathForResource:soundFileName ofType: ...
- First step of using junit---------Software Testing Lab 1---2016.03.18
1. Install junit a) Download “junit.jar” b) In eclipse, Windows->Preferences->Java-& ...
- 第三百四十四天 how can I 坚持
三言诗,把自己的心情,想要说的话用三句话诗意的表达出来.像: 烦===>好想睡一觉,待日落,盼天明. 愁====>待到花开花落,闲庭信步,蹋碎一世忧愁. 三句话,可以表达的很好. 老是感觉 ...