如何让 jQuery UI Accordion 默认折叠？

在开发网站或应用程序时，您可能需要使用折叠控件来组织和显示内容。其中一个流行的折叠控件是 jQuery UI Accordion。默认情况下，Accordion 是以展开的状态显示的，但在某些情况下，您可能需要将其默认折叠。

下面是要让 jQuery UI Accordion 默认折叠的步骤：

步骤 1：链接 jQuery UI 和必要的库

在您的 HTML 页面中，您需要先通过链接来安装 jQuery，然后再链接 jQuery UI 和 Accordion 相关的库文件。示例代码如下：

<!-- 引用 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引用 jQuery UI 库 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

<!-- 引用 Accordion 相关库 -->
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-accordion-mauro/dist/jquery-ui-accordion.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui-accordion-mauro/dist/jquery-ui-accordion.css" />

步骤 2：配置 Accordion

在初始化 Accordion 之前，您需要配置它的选项。为了让 Accordion 默认折叠，您需要设置 'active' 选项为 false。示例代码如下：

$(function () {
  $("#accordion").accordion({
    active: false, // 设置为 false，表示默认折叠
    collapsible: true,
    heightStyle: "content",
  });
});

步骤 3：创建 HTML 结构

最后，您需要创建 HTML 结构来呈现 Accordion。示例代码如下：

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
      placerat, turpis sed posuere congue, est eros sodales ante, eu
      rutrum velit mauris id nulla.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
      Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
      dapibus, neque id cursus faucibus, tortor neque egestas augue, eu
      vulputate magna eros eu erat. Aliquam erat volutpat.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
      Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra
      non, semper suscipit, posuere a, pede. Donec nec justo eget felis
      facilisis fermentum. Aliquam porttitor mauris sit amet orci.
    </p>
  </div>
</div>

将以上三个步骤结合起来，您就可以将 jQuery UI Accordion 默认折叠了。

结论

上述步骤是如何将 jQuery UI Accordion 默认折叠。为了实现这一目标，您需要配置 Accordion 的选项，使用相应的库文件和创建 HTML 结构。如果一切正常，您的 Accordion 将默认折叠，并且用户需要手动将其展开。