jQuery UI改写Accordion，实现同时展开多个Panel

最近在做一个项目，其中有个UI要做成类似jQuery UI中Accordion的样子。但是Accordion在某一时刻只可以展开一个Panel，所以就改写了一下Accordion，让它可以同时展开多个Panel。

源代码：

/**
 * 同时展开多个Panel
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
(function($) {
if ($.ui.accordion) {
	var old_clickHandler = $.ui.accordion.prototype._clickHandler;
	var new_clickHandler = function(event,target) {
		var o = this.options;
		if (o.disabled) return false;
		// called only when using activate(false) to close all parts programmatically
		if (!event.target && o.collapsible) {
			this.headers.removeClass(ui-state-active ui-corner-top)
						.addClass(ui-state-default ui-corner-all)
						.find(.ui-icon)
						.removeClass(o.icons.headerSelected)
						.addClass(o.icons.header);
			this.headers.next().addClass('ui-accordion-content-active');
			var toHide = this.headers.next(),data = {
							options: o,newHeader: $([]),oldHeader: o.headers,newContent: $([]),oldContent: toHide
						},toShow = (this.active = $([]));
			this._toggle(toShow,toHide,data);
			return false;
		}
		// get the click target
		var clicked = $(event.currentTarget || target);
		var clickedisActive = clicked.next().css(display) != none;
		// if animations are still active,or the active header is the target,ignore click
		if (this.running || (!o.collapsible && clickedisActive)) {
			return false;
		}

		// switch classes
		clicked.toggleClass(ui-state-active)
					.toggleClass(ui-corner-top)
					.toggleClass(ui-state-default)
					.toggleClass(ui-corner-all)
					.find(.ui-icon)
					.toggleClass(o.icons.headerSelected)
					.toggleClass(o.icons.header);
		clicked.next().addClass('ui-accordion-content-active');

		// find elements to show and hide
		var toShow = clicked.next(),toHide = clickedisActive ? clicked.next() : $([]),data = {
						options: o,newHeader: clickedisActive && o.collapsible ? $([]) : clicked,oldHeader: $([]),newContent: clickedisActive && o.collapsible ? $([]) : toShow.find('> *'),oldContent: $([])
					},down = true;

		this._toggle(toShow,data,clickedisActive,down);

		return false;
	};

	$.extend($.ui.accordion.defaults,{
		collapsible: true,multipleMode: false
	});

	$.extend($.ui.accordion.prototype,{
		_clickHandler: function(event,target) {
			if (this.options.multipleMode === true) {
				new_clickHandler.apply(this,arguments);
			}
			else {
				old_clickHandler.apply(this,arguments);
			}
		}
	});
};
})(jQuery);

将上面的代码保存成.js文件并引入到页面，调用的时候只要设置multipleMode为true就可以了。

/**
 * 同时展开多个Panel
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
$(#accordion).accordion({multipleMode: true});

原文地址：https://www.jb51.cc/jquery/527458.html