基于jQuery开发的手风琴插件 jquery.accordion.js
/*
* 手风琴插件说明：
* 1、treeTrunk对应树干
* 2、treeLeaf对应树叶，html代码结构一般为treeTrunk.next()元素
* 3、treeTrunkActiveClass是树干展开后添加的样式
* 4、treeType是触发手风琴效果的事件形式
* 5、treeIs 加载后是否将第一个树干展开
* 6、speed 展开、闭合动画执行时间
* 7、插件命名为jquery.accordion.js
*/
;
(function($) {
$.fn.accordion = function(options) {
//插件默认值
var defaultVal = {
treeTrunk: 'a', //树干--点击需要展开的元素
treeLeaf: 'ul', //树叶--点击展开元素后显示的内容
treeTrunkActiveClass: 'active', //当前树干--当前展开树干元素的添加的样式
treeType: 'click', //触发展开/关闭的事件类型：click,mouseenter,mouseleave,mouseout,mouseover
treeIs: true, //页面加载后是否显示第一个树干的树叶内容
speed:500//动画执行时间
};
var obj = $.extend(defaultVal, options); //合并参数 return this.each(function() {
var selObject = $(this); //获取触发手风琴事件对象
var selTreeTrunk = selObject.find(obj.treeTrunk); //获取当前对象下的树干元素
var selTreeLeaf = selTreeTrunk.next(obj.treeLeaf); //获取当前对象下的树干元素下的树叶 //绑定事件
selTreeTrunk.bind(obj.treeType, function() {
//判断树叶是否显示
if($(this).next(selTreeLeaf).is(':visible')) {
//关闭树叶
$(this).next(selTreeLeaf).slideUp(obj.speed);
//移除active样式
$(this).removeClass(obj.treeTrunkActiveClass);
} else {
//所有树干移除移除active样式
selTreeTrunk.removeClass(obj.treeTrunkActiveClass);
//当前树干添加active样式
$(this).addClass(obj.treeTrunkActiveClass);
//所有树叶闭合
selTreeTrunk.next(selTreeLeaf).slideUp(obj.speed);
//当前树干下的树叶展开
$(this).next(selTreeLeaf).slideDown(obj.speed);
}
});
//页面加载后触发第一个树干显示树叶内容
if(obj.treeIs) {
selTreeTrunk.eq(0).trigger(obj.treeType);
}
});
}
})(jQuery);
2、插件使用
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>基于jQuery的手风琴插件</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
} ul.sidebar-menu {
width: 200px;
padding: 10px;
} ul.sidebar-menu>li>a {
font-size: 16px;
line-height: 20px;
color: #000;
text-decoration: none;
} ul.sidebar-menu>li>a:hover,
ul.sidebar-menu>li>a.active {
background-color: #675C7C;
color: white;
} ul.sidebar-menu>li>ul {
display: none;
} ul.sidebar-menu>li>ul>li>a {
display: inline-block;
font-size: 14px;
line-height: 18px;
color: #000;
text-decoration: none;
}
</style>
</head> <body>
<ul class="sidebar-menu">
<li class="treeview">
<a href="#">
标题1
</a>
<ul>
<li class="">
<a href="index.html">标题1-1</a>
</li>
<li>
<a href="index2.html">标题1-2</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
标题2
</a>
<ul>
<li class="">
<a href="index.html">标题2-1</a>
</li>
<li>
<a href="index2.html">标题2-2</a>
</li>
</ul>
</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jquery.accordion.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('.sidebar-menu').accordion({
//获取树干元素
treeTrunk: '.treeview a'
})
})
</script> </body> </html>
说明：
（1）、jquery.accordion.js插件的路径要配置对。
（2）、可以自己编辑页面的展示样式，如active样式。
3、展示效果：
请直接运行上述代码查看插件效果。
基于jQuery开发的手风琴插件 jquery.accordion.js的更多相关文章
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
- jQuery 开发一个简易插件
jQuery 开发一个简易插件 //主要内容 $.changeCss = function(options){ var defaults = { color:'blue', ele:'text', f ...
- 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...
- jQuery响应式幻灯片插件jquery.glide.js（支持触摸&轻量级）
找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- jquery判断浏览器版本插件，jquery-browser.js
jquery判断浏览器版本插件,jquery-browser.js,jquery 判断是否为ie浏览器插件 >>>>>>>>>>>&g ...
- jQuery懒加载插件jquery.lazyload.js使用说明实例
jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...
- [转]jquery开发自定义的插件总结
本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...
随机推荐
- 关于Javascript循环体变量声明与初始化的效率问题
针对循环体变量声明与初始化的效率问题,将执行的简单测试代码如下: function test(n) { console.time('Internally initialized'); for (var ...
- Java基础语法实例(2)——实习第二天
来到广州实习的第二天,广州好潮湿,这就是我的感觉,手表里面都开始产生了水雾,这就尴尬了...每天不断的雨.好吧,尽管我很喜欢这里的树,但是我以后应该也不会再来广州了,其实也说不准.想起了<谁动了 ...
- App测试札记
App测试札记 测试应该收集信息 测试应该问问题 测试应该扮演不同角色 测试应该如实反馈 初学者 有哪些可以利用的信息?需求,技术方案,测试设计,现有功能,相关人员 App会在哪些环境下运行 App会 ...
- Masonry 在swift下的使用
Masonry在oc下使用很方便,但是在swift下,由于oc方法和property都可以使用.fuc的语法,swift下只有属性可以使用.property的语法,方法只能写成.func().因此在s ...
- 关于cookie与session的理解
服务器端并不能捕获客户端的浏览器关闭事件,因此你关闭浏览器以后,服务器端那个Session还是存在的,要超时以后才被回收,启动一个新的浏览器会启动一个新的session,所以他不认你了session永 ...
- 第14章 Linux开机详细流程
本文目录: 14.1 按下电源和bios阶段 14.2 MBR和各种bootloader阶段 14.2.1 boot loader 14.2.2 分区表 14.2.3 采用VBR/EBR方式引导操作系 ...
- 【Android Developers Training】 26. 在SQL数据库中保存数据
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- Backbone中父子view之间的值传递
backbone中,使用最多的莫过于在view中进行操作,如模板的渲染以及事件函数的定义.为了提高代码的可维护性,一般地我们会写多个视图即view,将界面按照功能的不同进行模块化划分,模块与view一 ...
- Javascript 类继承
Js继承 JavaScript并不是真正面向对象的语言,是基于对象的,没有类的概念. 要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现 /** 声明一个基础父类 ...
- 本地服务器 windows server 2008 datacenter conn /as sysdba 提示 ora-01031 insufficient privileges
原因是需要把当前用户administrator(为例)添加到ora_dba组里. 服务器管理器--配置--本地用户和组--组