博客

如何保持jQuery UI Accordion的默认折叠状态

  • Post category:jquery

如何保持jQuery UI Accordion的默认折叠状态

jQuery UI Accordion是一种常见的UI元素，用于在Web页面中显示可折叠的内容。在本攻略中，我们将详细介绍如何保持jQuery UI Accordion的折叠状态，并提供两个示例说明它们的用途。

保持默认折叠状态

要保持jQuery UI Accordion的默认折叠状态，我们可以使用active选项，并将其设置为false。以下是一个示例：

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Section 1 content goes here.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Section 2 content goes here.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Section 3 content goes here.</p>
  </div>
</div>

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

在上述示例中，我们使用<div>元素创建一个Accordion，并使用jQuery UI的accordion()方法来初始化它。我们active选项为false，以保持默认折叠状态。我们还设置collapsible选项为true，以允许用户关闭所有部分。

保持指定部分的默认折叠状态

如果我们只想保持Accordion中的特定部分默认折叠状态，我们可以使用active选项，并将其设置为相应的索引。以下是一个示例：

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Section 1 content goes here.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Section 2 content goes here.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Section 3 content goes here.</p>
  </div>
</div>

$("#accordion").accordion({
  active: 1,
  collapsible: true
});

在上述示例中，我们使用<div>元素创建一个Accordion，并使用jQuery UI的accordion()方法来初始化它。我们设置active选项为1，以保持第二个部分的默认折叠状态。我们还设置collapsible选项为true，以允许用户关闭所有部分。

示例

示例1：保持默认折叠状态

在这个示例中，我们将保持所有部分的默认折叠状态。以下是完整的HTML和JavaScript代码：

<!DOCTYPE html>
<html>
<head>
  <title>My jQuery App</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script>
    $(function() {
      $("#accordion").accordion({
        active: false,
        collapsible: true
      });
    });
  </script>
</head>
<body>
  <div id="accordion">
    <h3>Section 1</h3>
    <div>
      <p>Section 1 content goes here.</p>
    </div>
    <h3>Section 2</h3>
    <div>
      <p>Section 2 content goes here.</p>
    </div>
    <h3>Section 3</h3>
    <div>
      <p>Section 3 content goes here.</p>
    </div>
  </div>
</body>
</html>

在上述示例中，我们使用jQuery UI的accordion()方法来创建一个Accordion，并设置active选项为false，以保持默认折叠状态。我们还设置collapsible选项为true，以允许用户关闭所有部分。

示例2：保持指定部分的默认折叠状态

在这个示例中，我们将保持第二个部分的默认折叠状态。以下是完整的HTML和JavaScript代码：

<!DOCTYPE html>
<html>
<head>
  <title>My jQuery App</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script>
    $(function() {
      $("#accordion").accordion({
        active: 1,
        collapsible: true
      });
    });
  </script>
</head>
<body>
  <div id="accordion">
    <h3>Section 1</h3>
    <div>
      <p>Section 1 content goes here.</p>
    </div>
    <h3>Section 2</h3>
    <div>
      <p>Section 2 content goes here.</p>
    </div>
    <h3>Section 3</h3>
    <div>
      <p>Section 3 content goes here.</p>
    </div>
  </div>
</body>
</html>

在上述示例中，我们使用jQuery UI的accordion()方法来创建一个Accordion，并设置active选项为1，以保持第二个部分的默认折叠状态。我们还设置collapsible选项为true，以允许用户关闭所有部分。

结论

在本攻略中，我们介绍了如何保持jQuery UI Accordion的默认折叠状态。我们提供了两个示例，分别演示了如何使用active选项来保持所有部分的默认折叠状态，以及如何使用相应的索引来保持特定部分的默认折叠状态。通过本攻略，你可以更好地了解如何在自己的代码中使用jQuery UI来创建可折叠的内容，并控制它们的默认状态。

Tags: