jQuery UI 手风琴展开/折叠全部 [英] 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 来实现这一点，同时保持手风琴组件的使用.

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.

问题:需要什么 JavaScript/jQuery 才能实现这一点，同时仍然使用 jQuery UIAccordion"组件来支持标准功能?

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

更新的 JSFiddle 链接:http://jsfiddle.net/ccollins1544/r8j105de/4/

Updated JSFiddle Link: http://jsfiddle.net/ccollins1544/r8j105de/4/

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