jQuery UI Accordion展开/折叠全部 [英] jQuery UI Accordion Expand/Collapse All

问题描述

我正在使用 jQuery UI Accordion （不允许打开多个项目一次）项目。使用手风琴是合适的，因为我通常做只希望一次打开一个面板。

I'm using the jQuery UI Accordion (which does not allow more than one item open at a time) on a project. Using accordion is appropriate since I usually do only want one panel open at a time.

但是，我需要提供全部展开单击时切换为全部折叠的链接。我不想在这个要求周围自定义近乎相同的手风琴功能，所以我想要一些JS来实现这一点，同时保持Accordion组件的使用。

However, I need to offer an "Expand All" link which switches to "Collapse All" when clicked. I don't want to custom write near-identical accordion functionality around this one requirement, so I'd like some JS that will achieve this whilst keeping the Accordion component in use.

问题：在使用jQuery UIAccordion组件为标准功能提供支持的同时，需要使用哪些JavaScript / jQuery？

Question: What JavaScript/jQuery is required to achieve this whilst still using the jQuery UI "Accordion" component to power the standard functionality?

这是一个小提琴： http://jsfiddle.net/alecrust/a6Cu7/

推荐答案

最后我发现这是考虑要求的最佳解决方案：

In the end I found this to be the best solution considering the requirements:

// 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;
});

这篇关于jQuery UI Accordion展开/折叠全部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！