(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期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)的更多相关文章

  1. 顶 兼容各种浏览器js折叠菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

  3. slideToggle+slideup实现手机端折叠菜单效果

    折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等, ...

  4. 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)

    用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...

  5. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  6. js矩阵菜单或3D立体预览图片效果

    js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...

  7. 前台JS(Jquery)调用后台方法 无刷新级联菜单示例

    前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...

  8. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

  9. JS+CSS打造三级折叠菜单,自动收缩其它级 js

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

随机推荐

  1. liunx之tar 命令

    tar命令 可以用来压缩打包单文件.多个文件.单个目录.多个目录. Linux打包命令_tar tar命令可以用来压缩打包单文件.多个文件.单个目录.多个目录. 常用格式: 单个文件压缩打包 tar ...

  2. 一天一个Java基础——通过异常处理错误

    <Thinking in Java>上对这章的讲解不少,可见重要性,学习和总结一些主要的记录下来. 一.创建自定义异常 package Exception; class SimpleExc ...

  3. 【转】Eclipse常用快捷键

    原文网址:http://denver.blog.51cto.com/272871/52219 编辑相关快捷键 1.[Alt+/] 为用户提供内容的辅助. 2.[Ctrl+O] 显示类中方法和属性的大纲 ...

  4. hadoop——配置eclipse下的map-reduce运行环境 1

    1.通过修改实例模板程序来实现自己的map-reduce: 为了让示例程序run起来: 1)安装eclipse 2)安装map-reduce的eclipse插件 eclipse的map-reduce插 ...

  5. 实现LoaderCallbacks接口动态循环加载网上图片并展示在手机屏幕上 ...

    1.布局xml文件 activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/re ...

  6. Arduino "Card failed, or not present"(即找不到SD卡)错误解决方案

    http://forum.arduino.cc/index.php?topic=28763.0 Arduino SD自带的例程都是有一个BUG的,必须在pinMode后面加上如下的第二行代码 pinM ...

  7. nested push animation can result in corrupted navigation bar

    2013-12-06 10:15:51.668 CodingForFun[4569:70b] nested push animation can result in corrupted navigat ...

  8. 创建优雅表格的8个js工具

    当需要呈现数百个表的数据时,展示和可访问性扮演着至关重要的角色.在这种情况下,倘若一个数据网格能够支持大量数据集的HTML Table并提供诸如排序.搜索.过滤和分页等功能,那是棒棒哒.在这篇文章中, ...

  9. 如何配置仿真器DM8127+SEED-XDS560v2PLUS和连接不上的问题的解决

    1 根据配置焊接JTAG电路转接板.我用的是14pin的. 2 安装仿真器驱动.安装完如下图 我安装的时候没有自动装上,第一次显示问号,后来手动的. 3 设置ccs工程 4 最后调试是这个样子 5 查 ...

  10. WebApp开发经验

    1.自适应屏幕 <meta name="viewport" id="viewport" content="width = device-widt ...