我在一个项目中使用jQuery UI Accordion（它不允许一次打开多个项目）。利用手风琴，因为我通常是合适的就只需要一次一个面板打开。
但是，我需要提供一个“全部展开”链接，单击时该链接会切换到“全部折叠”。我不想围绕这一要求自定义编写几乎相同的手风琴功能，所以我想要一些 JS 来实现这一点，同时保持手风琴组件的使用。
问题：需要什么 JavaScript/jQuery 才能实现这一点，同时仍然使用 jQuery UI“Accordion”组件来支持标准功能？
这是一个小提琴：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');
});
“全部打开”时交换按钮
多亏了我们自定义的“显示”和“隐藏”事件，当面板发生变化时，我们可以听到一些东西。唯一的特殊情况是“它们都打开了吗”，如果是，按钮应该是“全部折叠”，如果不是，它应该是“全部展开”。
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/
我不相信你可以用手风琴做到这一点，因为它是专门设计的，保留了最多打开一件物品的特性。然而，即使您说不想重新实现手风琴，您也可能高估了所涉及的复杂性。
考虑以下场景，其中您有一个垂直的元素堆栈，
++++++++++++++++++++
+ Header 1 +
++++++++++++++++++++
+ +
+ Item 1 +
+ +
++++++++++++++++++++
+ Header 2 +
++++++++++++++++++++
+ +
+ Item 2 +
+ +
++++++++++++++++++++
如果你很懒惰，你可以使用表格来构建它，否则，适当样式的 DIV 也可以工作。
每个项目块都可以有一个itemBlock. 单击标题将导致 itemBlock 类的所有元素被隐藏 ( $(".itemBlock").hide())。然后，您可以使用 jqueryslideDown()函数展开标题下方的项目。现在您几乎已经实现了手风琴。
要展开所有项目，只需使用$(".itemBlock").show()或者如果您想要动画，$(".itemBlock").slideDown(500). 要隐藏所有项目，只需使用$(".itemBlock").hide().