基於jQuery開發的手風琴插件 jquery.accordion.js

知識 08-04

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>