[效果]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 ...
随机推荐
- 【转】Android端与Android端利用WIFI进行FTP通信
原文网址:http://www.cnblogs.com/zhangkai5157/p/4303188.html 一.客户端通信工具类: import java.io.File; import java ...
- suse linux中apache+php服务器安装
主站下载源码 tar zxvf httpd-2.2.4.tar.bz2cd httpd-2.2.4 ./configure --prefix=/usr/local/apache --sysconfdi ...
- tomcat Manger App
转发链接,嘿嘿http://simeon.blog.51cto.com/18680/58877
- hdu 2476(第一道区间dp)
题意:就是给定两个字符串,第一个是初始串,第二个是目标串,问你把初始串变到目标串最少需要多少串! 分析:此题分两步,第一步是假设开始的初始串是空串,然后就进行区间dp,dp[i][j]代表把区间[i, ...
- 【转】linux之mkfs/mke2fs格式化
转自:http://blog.csdn.net/andyhooo/article/details/5321584 mkfs [root@www ~]# mkfs [-t 檔案系統格式] 裝置檔名 選項 ...
- Python 学习笔记(六)正则扩展标记
1. (?:...) 不想保存括号里匹配项时使用 The (?:...) notation should be fairly popular; with it, you can groupparts ...
- SpringMVC + Spring + MyBatis 学习笔记:遭遇order by 排序问题
系统:WIN8.1 数据库:Oracle 11GR2 开发工具:MyEclipse 8.6 框架:Spring3.2.9.SpringMVC3.2.9.MyBatis3.2.8 用MyBatis写排序 ...
- 移动端的日期插件 mobiscroll 2.14.4 破解版
官方报价695美元 http://mobiscroll.com/pricing 这个 mobiscroll 2.14.4 破解版 包括datetime和calendar组件,包括mobiscroll和 ...
- IE 兼容性写法
1. 条件注释语句 <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE ...
- PHP代码格式化批量脚本
@echo off echo please input phpCB url: set /p input= cd /d "E:\tools\phpCB\" phpCB --space ...