虽然有几十个 jQuery 手风琴插件,但我想为我正在处理的项目创建一些自定义的东西。无论如何,一切正常(这里是提琴手 - http://jsfiddle.net/sunnyday195/g9SvF/)除了我想添加布尔选项,如果其他手风琴 div 是打开的,那么首先关闭它们应该关闭(立即或幻灯片)然后打开悬停或单击的那个。这是我的 JS 代码:
(function($) {
$.fn.extend({
//PLUGIN NAME
accordian: function(options) {
//DEFAULT VARIABLES
var defaults = {
imageShow: '',
openOnload: 'no',
imageHide: '',
actionType: 'instant',
speed: 500,
userActionType: 'click',
openAndCloseArea: ''
};
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
var obj = $(this);
var openAndCloseArea = $(o.openAndCloseArea);
var imageShow = $(o.imageShow);
var imageHide = $(o.imageHide);
var openOnload = o.openOnload;
var actionType = o.actionType;
var speed = o.speed;
var userActionType = o.userActionType;
var animationDone = true;
//START SCRIPT ENGINE
//BELOW SETS ONLOAD SETTINGS BASED ON ABOVE VARIABLES
var instant = function(type, openAndCloseArea, obj, imageHide, imageShow) {
if (type === 'instantShow') {
openAndCloseArea.css('display', 'block');
openAndCloseArea.data("name", "show");
obj.addClass('activeSA');
openAndCloseArea.addClass('activeSAArea');
imageHide.show();
imageShow.hide();
}
if (type === 'instantHide') {
openAndCloseArea.css('display', 'none');
openAndCloseArea.data("name", "hide");
obj.removeClass('activeSA');
openAndCloseArea.removeClass('activeSAArea');
imageHide.hide();
imageShow.show();
}
}
var slide = function(type, openAndCloseArea, obj, imageHide, imageShow) {
if (type === 'slideShow') {
openAndCloseArea.data("name", "show");
openAndCloseArea.addClass('activeSAArea');
obj.addClass('activeSA');
imageHide.show();
imageShow.hide();
}
if (type === 'slideHide') {
openAndCloseArea.data("name", "hide");
obj.removeClass('activeSA');
openAndCloseArea.removeClass('activeSAArea');
imageHide.hide();
imageShow.show();
}
}
//DOES INITIAL ONLOAD WORK
if (openOnload === false) {
instant('instantHide', openAndCloseArea, obj, imageHide, imageShow);
} else {
instant('instantShow', openAndCloseArea, obj, imageHide, imageShow);
}
obj.on(userActionType + ".accordian", function(event) {
//INSTANTLY SHOWS
if (actionType === 'instant') {
var boxStatus = openAndCloseArea.data("name");
if (boxStatus === 'hide') {
instant('instantShow', openAndCloseArea, obj, imageHide, imageShow);
return false;
} else {
instant('instantHide', openAndCloseArea, obj, imageHide, imageShow);
return false;
}
}
//DOES SLIDE EFFECT
if (actionType === 'slide' && animationDone === true) {
animationDone = false;
var boxStatus = openAndCloseArea.data("name");
if (boxStatus === 'hide') {
openAndCloseArea.slideDown(speed, function() {
animationDone = true;
});
slide('slideShow', openAndCloseArea, obj, imageHide, imageShow);
return false;
} else {
openAndCloseArea.slideUp(speed, function() {
animationDone = true;
});
slide('slideHide', openAndCloseArea, obj, imageHide, imageShow);
return false;
}
}
});
});
}
});
})(jQuery);