jQueryUI 手风琴折叠选项(1)

📌 相关文章

📜 jQueryUI 手风琴折叠选项(1)

📅 最后修改于: 2023-12-03 14:43:19.481000 🧑 作者: Mango

jQueryUI 手风琴折叠选项

简介

jQueryUI 是一个适用于 Web 应用程序的 jQuery 用户界面库。其中包括了丰富的UI组件，如手风琴折叠选项，可以帮助开发者轻松地实现更好的用户交互体验。

手风琴折叠选项是一种类似于选项卡的组件，但是只有一个可见面板，其余面板都是被折叠起来的。当用户点击其中一个面板的标题时，该面板会展开，同时关闭其他面板。

使用方法

引入文件

在使用手风琴折叠选项之前，需要先引入 jQuery 和 jQueryUI 的库文件。可以使用以下方式引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

HTML 结构

手风琴折叠选项需要在 HTML 中嵌套 <h3> 标签和 <div> 标签。<h3> 标签用于设置面板标题，<div> 标签用于设置面板内容。

<div id="accordion">
  <h3>面板1</h3>
  <div>面板1的内容</div>
  <h3>面板2</h3>
  <div>面板2的内容</div>
  <h3>面板3</h3>
  <div>面板3的内容</div>
</div>

初始化

使用以下代码来初始化手风琴折叠选项：

$( "#accordion" ).accordion();

自定义选项

可以使用 options 参数来自定义手风琴折叠选项。

$( "#accordion" ).accordion({
  collapsible: true, // 可以在任意打开状态下关闭所有面板
  active: false //关闭所有面板
});

示例

以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <title>jQueryUI 手风琴折叠选项</title>
</head>
<body>
  <div id="accordion">
    <h3>面板1</h3>
    <div>面板1的内容</div>
    <h3>面板2</h3>
    <div>面板2的内容</div>
    <h3>面板3</h3>
    <div>面板3的内容</div>
  </div>
  <script>
    $( "#accordion" ).accordion({
      collapsible: true,
      active: false
    });
  </script>
</body>
</html>

效果如下：