jQuery UI手风琴展开/收起全部

Question

jQuery UI手风琴展开/收起全部

javascriptjqueryjquery-uiaccordionjquery-ui-accordion

36

我正在项目中使用 jQuery UI Accordion，这个组件一次只允许打开一个面板。使用 Accordion 是适当的，因为通常我只是希望有一个面板处于打开状态。

然而，我需要提供一个“展开全部”链接，当点击后切换为“折叠全部”。我不想在这个需求上编写接近相同的手写Accordion功能代码，所以我想使用一些JS来实现这个需求，同时仍然使用 Accordion 组件。

问题: 如何使用 JavaScript/jQuery 来实现此功能，并仍然使用 jQuery UI "Accordion" 组件来提供标准功能？

下面是一个 fiddle 示例: http://jsfiddle.net/alecrust/a6Cu7/

- AlecRust

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nathan Hawks · Answer 1

我尝试了老式的方法，只是调整 aria-* 和 CSS 属性，就像许多旧答案一样，但最终放弃了，只是做了一个条件性的虚拟点击。效果很好：

HTML：

<a href="#" onclick="expandAll();"
  title="Expand All" alt="Expand All"><img
    src="/images/expand-all-icon.png"/></a>
<a href="#" onclick="collapseAll();"
  title="Collapse All" alt="Collapse All"><img
    src="/images/collapse-all-icon.png"/></a>

Javascript：

async function expandAll() {
  let heads = $(".ui-accordion-header");
  heads.each((index, el) => {
    if ($(el).hasClass("ui-accordion-header-collapsed") === true)
      $(el).trigger("click");
  });
}

async function collapseAll() {
  let heads = $(".ui-accordion-header");
  heads.each((index, el) => {
    if ($(el).hasClass("ui-accordion-header-collapsed") === false)
      $(el).trigger("click");
  });
}

（在那些奇怪的地方放置HTML换行符是为了防止演示中的空白。）

- NCR · Answer 2

使用太枫的一个例子，我进行了修改以允许展开和折叠。

... // 连接展开/折叠全部

var expandLink = $('.accordion-expand-all');

expandLink.click(function () {

$(".ui-accordion-content").toggle();
});