我在项目中使用jQuery UI Accordion（一次不允许打开多个项目）。使用手风琴是合适的，因为我通常只希望一次打开一个面板。
但是，我需要提供一个“全部展开”链接，单击此按钮可切换到“全部折叠”。我不想在这个要求周围自定义几乎相同的手风琴功能，所以我想要一些JS来实现这一点，同时保持Accordion组件的使用。
问题：在使用jQuery UI“Accordion”组件为标准功能提供支持的同时，需要哪些JavaScript / jQuery才能实现这一目标？
在jQuery UI论坛中的As discussed，你不应该使用手风琴。
如果你想看起来像手风琴一样的东西，那很好。使用他们的类来设置它们的样式，并实现您需要的任何功能。然后添加一个按钮来打开或关闭它们都非常简单。 Example
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个面板打开”，除非您点击“全部展开”按钮实际上要容易得多。 Example
我发现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;
});
使用关于Taifun的示例，我修改为允许展开和折叠。
... //挂钩展开/全部折叠
var expandLink = $('.accordion-expand-all');
expandLink.click(function () {
$(".ui-accordion-content").toggle();
});
我的解决方案：
在真实的项目中工作。
$(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()）。然后，您可以使用jquery slideDown()函数展开标题下方的项目。现在你已经实现了手风琴。
要扩展所有项目，只需使用$(".itemBlock").show()或如果你想要它动画，$(".itemBlock").slideDown(500)。要隐藏所有项目，只需使用$(".itemBlock").hide()。
这是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调用：
$("#accordion").collapsible();
看起来更干净，并避免任何类添加到标记。
尝试这一个jquery-multi-open-accordion，可能会帮助你
我之前的第二个bigvax评论，但你需要确保你添加
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();
}
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>