大家好，对jQuery 浅析UI改写Accordion，实现同时展开多个Panel感兴趣的小伙伴，下面一起跟随三零脚本的小编来看看jQuery 浅析UI改写Accordion，实现同时展开多个Panel的例子吧。

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

源代码：

/**
 * 同时展开多个Panel
 *
 * @param 
 * @arrange (三零脚本) www.q3060.com
 **/
(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, toHide, 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 (三零脚本) www.q3060.com
 **/
$("#accordion").accordion({multipleMode: true});