使用jQuery手风琴制作展开/折叠所有功能

Question

我在一种非传统的方式中使用jQuery Accordion UI：我让手风琴节点独立开合。我还尝试使用“展开/折叠全部”按钮，但问题是它不能折叠任何单独打开的节点。

如何使“展开/折叠全部”按钮能够折叠所有节点，甚至是单独打开的节点？

不改变HTML标记的情况下，是否可以完成这个操作？

以下两个答案处理了一次只能打开一个节点的手风琴：jQuery UI Accordion Expand/Collapse All和Jquery Accordion Expand All Collapse All

Fiddle：https://jsfiddle.net/d78h6g1c/

$(".accordion").accordion({
  collapsible: true,
  clearStyle: true,
  active: false,
})

$('.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;
});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="accordion-expand-collapse"><a href="#">Expand all</a></button>

<div class="accordion">
  <h3 class="faq">1. FAQ</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="accordion">
  <h3 class="faq">2. FAQ</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

<div class="accordion">
  <h3 class="faq">3. FAQ</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

- BlueDogRanch

---

对于这种情况，jsfiddle可能会很有用。但是不要从问题中删除代码，只需将其转换为代码块即可。 - Daniel Black

我已经创建了一个演示此问题的链接：https://jsfiddle.net/d78h6g1c/ - Daniel Black

谢谢，你比我快了几秒钟。 - BlueDogRanch

Answer 1

稍微修改处理方式以实现所需的行为。

处理程序在h3元素上触发点击事件。

1. 当元素具有ui-accordion-header-collapsed CSS时，调用click()来展开它们所有。
2. 当元素具有ui-state-active CSS时，调用click()来折叠它们所有。

请尝试下面的可运行示例：

$(".accordion").accordion({
  collapsible: true,
  clearStyle: true,
  active: false,
})

$('.accordion-expand-collapse a').click(function() {
  
  if ($(this).text() == 'Expand all') {
      // Fire click on any that are already collapsed to expand.
      $('.accordion h3.ui-accordion-header-collapsed').click();
      $(this).text('Collapse all');
  } else {
      // Fire click on any that are already active to collapse.
      $('.accordion h3.ui-state-active').click();
      $(this).text('Expand all');
  }
  
  return false;
});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<button class="accordion-expand-collapse"><a href="#">Expand all</a></button>

<div class="accordion">
  <h3 class="faq">1. FAQ</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="accordion">
  <h3 class="faq">2. FAQ</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

<div class="accordion">
  <h3 class="faq">3. FAQ</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

- Paul T.

---

谢谢！这很好用，而且不需要更改HTML。 - BlueDogRanch