我正在项目中使用 jQuery UI Accordion，这个组件一次只允许打开一个面板。使用 Accordion 是适当的，因为通常我只是希望有一个面板处于打开状态。
然而，我需要提供一个“展开全部”链接，当点击后切换为“折叠全部”。我不想在这个需求上编写接近相同的手写Accordion功能代码，所以我想使用一些JS来实现这个需求，同时仍然使用 Accordion 组件。
问题: 如何使用 JavaScript/jQuery 来实现此功能，并仍然使用 jQuery UI "Accordion" 组件来提供标准功能？
下面是一个 fiddle 示例: http://jsfiddle.net/alecrust/a6Cu7/
正如在jQuery UI论坛中所讨论的，您不应该使用手风琴来实现这个功能。
如果您想要一个看起来和行为像手风琴的东西，那是可以的。使用它们的类来设置样式，并实现您需要的任何功能。然后添加一个按钮来打开或关闭它们都是很简单的。示例
HTML
通过使用jquery-ui的类，我们可以使手风琴看起来就像“真正”的手风琴一样。
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
<h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
Section 1
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
Content 1
</div>
</div>
自己制作手风琴
通常我们只需要手风琴标题来切换其下一个兄弟元素的状态，即内容区域。我们还添加了两个自定义事件“show”和“hide”，稍后我们将会用到它们。
var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');
headers.click(function() {
var panel = $(this).next();
var isOpen = panel.is(':visible');
// open or close as necessary
panel[isOpen? 'slideUp': 'slideDown']()
// trigger the correct custom event
.trigger(isOpen? 'hide': 'show');
// stop the link from causing a pagescroll
return false;
});
展开/折叠全部
我们使用布尔标志isAllOpen来标记按钮何时被更改，这也可以很容易地成为一个类或者是大型插件框架中的状态变量。
expandLink.click(function(){
var isAllOpen = $(this).data('isAllOpen');
contentAreas[isAllOpen? 'hide': 'show']()
.trigger(isAllOpen? 'hide': 'show');
});
当面板全部展开时交换按钮
由于我们使用了自定义的“show”和“hide”事件，因此我们可以监听面板变化时所需的内容。唯一的特殊情况是“它们是否全部打开”，如果是，则按钮应为“折叠全部”，否则应为“展开全部”。
contentAreas.on({
// whenever we open a panel, check to see if they're all open
// if all open, swap the button to collapser
show: function(){
var isAllOpen = !contentAreas.is(':hidden');
if(isAllOpen){
expandLink.text('Collapse All')
.data('isAllOpen', true);
}
},
// whenever we close a panel, check to see if they're all open
// if not all open, swap the button to expander
hide: function(){
var isAllOpen = !contentAreas.is(':hidden');
if(!isAllOpen){
expandLink.text('Expand all')
.data('isAllOpen', false);
}
}
});
编辑评论： 保持“仅打开1个面板”，除非您点击“展开全部”按钮，这实际上要简单得多。示例
这是我的解决方案：
实际项目中的工作。
$(function () {
$("#accordion").accordion({collapsible:true, active:false});
$('.open').click(function () {
$('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true','tabindex':'0'});
$('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
$('.ui-accordion-content').addClass('ui-accordion-content-active').attr({'aria-expanded':'true','aria-hidden':'false'}).show();
$(this).hide();
$('.close').show();
});
$('.close').click(function () {
$('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
$('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
$('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
$(this).hide();
$('.open').show();
});
$('.ui-accordion-header').click(function () {
$('.open').show();
$('.close').show();
});
});
考虑到需求，最终我发现这是最好的解决方案：
// Expand/Collapse all
$('.accordion-expand-collapse a').click(function() {
$('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
$(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all');
$(this).toggleClass('collapse');
return false;
});
JSFiddle链接已更新：http://jsfiddle.net/ccollins1544/r8j105de/4/
$('.accordion-expand-all a').click(function() {
$('#accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
$(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all');
$(this).toggleClass('collapse');
return false;
}); - Phung D. An++++++++++++++++++++
+ Header 1 +
++++++++++++++++++++
+ +
+ Item 1 +
+ +
++++++++++++++++++++
+ Header 2 +
++++++++++++++++++++
+ +
+ Item 2 +
+ +
++++++++++++++++++++
_create，就无法删除它，这实际上意味着分叉小部件。不过，我已经为您添加了一个答案，将所有内容都整理好了。 - Sinetheta这是由Sinetheta编写的代码，已转换为jQuery插件： 将以下代码保存到js文件中。
$.fn.collapsible = function() {
$(this).addClass("ui-accordion ui-widget ui-helper-reset");
var headers = $(this).children("h3");
headers.addClass("accordion-header ui-accordion-header ui-helper-reset ui-state-active ui-accordion-icons ui-corner-all");
headers.append('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">');
headers.click(function() {
var header = $(this);
var panel = $(this).next();
var isOpen = panel.is(":visible");
if(isOpen) {
panel.slideUp("fast", function() {
panel.hide();
header.removeClass("ui-state-active")
.addClass("ui-state-default")
.children("span").removeClass("ui-icon-triangle-1-s")
.addClass("ui-icon-triangle-1-e");
});
}
else {
panel.slideDown("fast", function() {
panel.show();
header.removeClass("ui-state-default")
.addClass("ui-state-active")
.children("span").removeClass("ui-icon-triangle-1-e")
.addClass("ui-icon-triangle-1-s");
});
}
});
};
在您的 UI 页面中引用它并调用类似于 jQuery 手风琴调用：
$("#accordion").collapsible();
看起来更加简洁，避免在标记中添加任何类。
jQuery("#jQueryUIAccordion").({ active: false,
collapsible: true });
$('.close').click(function () {
$('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
$('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
$('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
}
如果您可以接受每个面板都是独立的，那么只需将每个面板放在自己的手风琴中：
$(".accordion-panel").accordion({
collapsible: true,
multiple: true,
active: 0
});
然后在 HTML 中，您可以将每个部分创建为自己的手风琴。
<div class="accordion-panel">
<h3 class="accordion-header">Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
</div>
<div class="accordion-panel">
<h3 class="accordion-header">Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
</div>
Yes, it is possible. Put all div in separate accordion class as follows:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("input[type=submit], button")
.button()
.click(function (event) {
event.preventDefault();
});
$("#tabs").tabs();
$(".accordion").accordion({
heightStyle: "content",
collapsible: true,
active: 0
});
});
function expandAll()
{
$(".accordion").accordion({
heightStyle: "content",
collapsible: true,
active: 0
});
return false;
}
function collapseAll()
{
$(".accordion").accordion({
heightStyle: "content",
collapsible: true,
active: false
});
return false;
}
</script>
<div class="accordion">
<h3>Toggle 1</h3>
<div >
<p>text1.</p>
</div>
</div>
<div class="accordion">
<h3>Toggle 2</h3>
<div >
<p>text2.</p>
</div>
</div>
<div class="accordion">
<h3>Toggle 3</h3>
<div >
<p>text3.</p>
</div>
</div>
我发现AlecRust的解决方案非常有帮助，但我添加了一些内容来解决一个问题：当您单击单个手风琴以展开它，然后单击按钮以展开时，它们都将被打开。但是，如果您再次单击按钮以折叠，则之前展开的单个手风琴不会折叠。
我使用了imageButton，但您也可以将该逻辑应用于按钮。
/*** Expand all ***/
$(".expandAll").click(function (event) {
$('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideDown();
return false;
});
/*** Collapse all ***/
$(".collapseAll").click(function (event) {
$('.accordion').accordion({
collapsible: true,
active: false
});
$('.accordion .ui-accordion-header').next().slideUp();
return false;
});
另外，如果您在手风琴内部有手风琴，并且您想仅展开第二级的所有内容，您可以添加一个查询：
/*** Expand all Second Level ***/
$(".expandAll").click(function (event) {
$('.accordion .ui-accordion-header:not(.ui-state-active)').nextAll(':has(.accordion .ui-accordion-header)').slideDown();
return false;
});
.first().show()，我更新了最终示例。 - Sinetheta