使用 jQuery Accordion 展开/折叠所有功能答案

【问题标题】：Making an expand/collapse all function with jQuery Accordion使用 jQuery Accordion 展开/折叠所有功能
【发布时间】：2022-11-19 00:56:30
【问题描述】：

我在非传统意义上使用 jQuery Accordion UI：我让手风琴节点独立打开和关闭。我还尝试使用“全部展开/折叠”按钮，这就是问题所在：它不会折叠自己打开的任何节点。

我怎样才能让“全部展开/折叠”折叠所有的鼻子，甚至是自己打开的节点？

这两个答案涉及一次只允许打开一个节点的手风琴：jQuery UI Accordion Expand/Collapse All 和Jquery Accordion Expand All Collapse All

小提琴：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>

【问题讨论】：

Argg ....我不知道为什么它不会运行 :( 在我的本地主机上运行。
我正在加载 jQuery、UI 和 CSS。
对于这种情况，jsfiddle 可能会有用。但是不要从问题中删除代码，只需转换为代码块而不是 sn-p。
我在这里创建了一个显示问题的工具：jsfiddle.net/d78h6g1c
谢谢，你比我快了几秒钟。

标签： javascript jquery jquery-ui-accordion

【解决方案1】：

你不需要 jQuery 来做手风琴——这是一个很容易实现的模式。

基本思想是有一个 CSS 规则，使“手风琴”中的元素默认不可见 (display:none)，然后有一个启用可见性的类 (display:???)。

在您的手风琴点击事件处理程序中，您首先删除可见性类的所有实例，然后将其添加到您希望可见的元素

var $makeVisible = ...; // a jQuery object with elements that you want to make visible
$(".myVisibilityClass").removeClass("myVisibilityClass");
$makeVisible.addClass("myVisibilityClass");

【讨论】：