支持多个展开的jquery折叠插件

搜遍了，终于找到了一个比较理想的 jquery-multi-open-accordion 可以替代 JQueryUI Accordion。两者用法类似，前者能同时展开多个面板，后者仅能同时展开一个面板；前者还支持编程展开/折叠多个面板，包括全部，这是手上项目需求的，简单示例片段如下：

Markup

<div id=”multiOpenAccordion”>
<h3><a href=”#”>tab 1</a></h3>
<div>
Lorem ipsum dolor sit amet
</div>
<h3><a href=”#”>tab 2</a></h3>
<div>
Lorem ipsum dolor sit amet
</div>
<h3><a href=”#”>tab 3</a></h3>
<div>
Lorem ipsum dolor sit amet
</div>
<h3><a href=”#”>tab 4</a></h3>
<div>
Lorem ipsum dolor sit amet
</div>
</div>
Script
// this will make the second tab by default opened (index starts from 0)
$(‘#multiOpenAccordion’).multiAccordion({active: 1 });

// [ OR ]
// supports multiple tabs to be opened by default
$(‘#multiOpenAccordion’).multiAccordion({active: [1, 2, 3] });

// you can also set active:false if you don’t want any tab to be opened by default
$(‘#multiOpenAccordion’).multiAccordion({active: false });

// show all tabs
$(‘#multiOpenAccordion’).multiAccordion({active: ‘all’ });

// hide all tabs
$(‘#multiOpenAccordion’).multiAccordion({active: ‘none’ });

// you can set the options as any jQuery UI plugin using option method
$(‘#multiOpenAccordion’).multiAccordion(‘option’, ‘active’, ‘all’);
Events
/* fired when any tab is clicked, ui here hold clicked tab and its content
* ui['tab'] // current tab
* ui['content'] // current tab content (div)
*/
click: function(event, ui) {}

// when accordion is initialized, ui here holds a jQuery object to the whole accordion
init: function(event, ui) {}

// when tab is shown, ui here hold the same as in click event above
tabShown: function(event, ui) {}

// when tab is hidden, ui here hold the same as in click event above
tabHidden: function(event, ui) {}

// How can you bind these events ?

// 1. at plugin initialization
$(‘#multiOpenAccordion’).multiAccordion({
active: ‘all’,
click: function(event, ui) {
alert(‘tab is clicked!’);
}
});

// 2. after initialization
$(‘#multiOpenAccordion’).multiOpenAccordion(‘multiopenaccordionclick’, function(){
alert(‘also clicked’);
});
Methods
// destroying the plugin and removing all handlers, and styles
$(‘#multiOpenAccordion’).multiOpenAccordion(‘destroy’);

 

jquery-multi-open-accordion 官方说法如下，虽然有一段看似workaround的代码，但效果不好

NOTE: If you want multiple sections open at once, don’t use an accordion

An accordion doesn’t allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don’t use this. Usually it can be written with a few lines of jQuery instead, something like this:

jQuery(document).ready(function(){
$(‘.accordion .head’).click(function() {
$(this).next().toggle();
return false;
}).next().hide();
});
Or animated:

jQuery(document).ready(function(){
$(‘.accordion .head’).click(function() {
$(this).next().toggle(‘slow’);
return false;
}).next().hide();
});

另外，这里 http://jsbin.com/eqape/457/edit 也有支持展开多个面板的改进，但没有jquery-multi-open-accordion强大，核心脚本如下：

$(“#notaccordion”).addClass(“ui-accordion ui-accordion-icons ui-widget ui-helper-reset”)
.find(“h3″)
.addClass(“ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom”)
.hover(function() { $(this).toggleClass(“ui-state-hover”); })
.prepend(‘<span class=”ui-icon ui-icon-triangle-1-e”></span>’)
.click(function() {
$(this)
.toggleClass(“ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom”)
.find(“> .ui-icon”).toggleClass(“ui-icon-triangle-1-e ui-icon-triangle-1-s”).end()
.next().toggleClass(“ui-accordion-content-active”).slideToggle();
return false;
})
.next()
.addClass(“ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom”)
.hide();

JQueryUI Accordion 下载地址： http://jqueryui.com/demos/accordion
jquery-multi-open-accordion 下载地址： http://code.google.com/p/jquery-multi-open-accordion/

转载自http://blog.xfwang.net/2012/03/17/jquery-multi-open-a ccordion/