您的位置：首页 > Web前端 > JQuery

基于jQuery开发的手风琴插件 jquery.accordion.js

2017-08-04 12:17 686 查看
1、插件代码
少说多做，基于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、展示效果：

请直接运行上述代码查看插件效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航