jQuery UI 手风琴 - 展开全部

Posted 2023-03-24

【中文标题】jQuery UI 手风琴 - 展开全部

【英文标题】：jQuery UI accordion - expand all

【发布时间】：2014-02-20 23:39:13

【问题描述】：

我正在使用来自 Jquery 网站的以下示例代码： http://jqueryui.com/accordion/#collapsible

<script>
$(function() 
$( "#accordion" ).accordion(
collapsible: true
);
);
</script>
<div id="accordion">
  <h3>Section 1</h3>
  <div> content 1 </div>
  <h3>Section 2</h3>
  <div> content 2 </div>
  <h3>Section 3</h3>
  <div> content 3 </div>
</div>

但现在我需要添加两个按钮：一个用于“全部折叠”，另一个用于“全部展开”。

您对如何实现这一点有什么建议吗？

【问题讨论】：

jQuery UI Accordion Expand/Collapse All的可能重复

如上所述，我会参考这个答案：***.com/a/12903079/1856970 虽然您确定手风琴是您项目的最佳选择吗？它们被设计为一次只能打开一个。这就是重点。

【参考方案1】：

/** html 代码**/

<a id="collapseAll">Collapse All</a>
<a id="expandAll">Expand All</a>

/** jQuery 代码 **/

$("#collapseAll").click(function()
    $(".ui-accordion-content").hide()
);


$("#expandAll").click(function()
    $(".ui-accordion-content").show()
);

【讨论】：

这个问题是关于展开/折叠所有手风琴，而不是隐藏/显示容器。