[效果]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 ...
随机推荐
- Ubuntu 下安装 使用 QQ
在Ubuntu下使用QQ显得高端大气了.界面也清爽多了. 一: 首先得下一个WineQQ,不用找了地址在这里: http://pan.baidu.com/share/link?shareid=3303 ...
- 嵌入式 Linux下修改MAC地址
Linux下修改MAC地址 方法一: 1.关闭网卡设备ifconfig eth0 down2.修改MAC地址ifconfig eth0 hw ether MAC地址3.重启网卡ifconfig eth ...
- xtraTabControl 如何遍历每个选项卡 z
XtraTabHitInfo hi = tabPositionControl.CalcHitInfo(new Point(e.X, e.Y)); if (hi.HitTest == XtraTabHi ...
- linux下使用go-oci8
地址:https://github.com/wendal/go-oci8 它是 https://github.com/mattn/go-oci8 的分支. win下安装步骤参考:http://www. ...
- GC Buffer Busy Waits处理(转载)
与单实例不同,在RAC环境中,由于多节点的原因,会因为节点间的资源争用产生GC类的等待,而这其中,GC Buffer Busy Waits又是最为常见的,从性能角度上说,RAC是把双刃剑,用的好,能够 ...
- Fisher information matrix笔记
在看FK论文时,fisher information matrix是必须理解的. 从维基百科查阅到,Fisher information matrix是用利用最大似然函数估计来计算方差矩阵. 来源于: ...
- BITED数学建模七日谈之四:数学模型分类浅谈
本文进入到数学建模七日谈第四天:数学模型分类浅谈 大家常常问道,数学模型到底有哪些,分别该怎么学习,这样能让我们的学习有的放矢,而不至于没了方向.我想告诉大家,现实生活中的问题有哪些类,数学模型就有哪 ...
- vmware设置centos虚拟机nat联网(转载)
今天在vmware虚拟主机中安装hearbeat,为了使用最新的版本,选用编译安装了.在编译过程中,需要连接被墙的网站下载文件,那只能用vpn,但我使用的是桥接方式联网,使用不了真实主机的vpn,于是 ...
- How To Set Up Port Forwarding in Linux
Port forwarding usually used when we want our computer act like a router. Our computer receive the p ...
- 原生JS取代一些JQuery方法
1.选取元素 // jQuery var els = $('.el'); // Native var els = document.querySelectorAll('.el'); // Shorth ...