jQuery UI 如何启用手风琴

手风琴是一种可折叠的UI组件，用于使网页更具视觉吸引力。手风琴有一些部分和子部分，代表可折叠的部分。每个元素都有一个标题，当点击时显示有关标题的更多详细信息的另一个部分。

这也只允许一个标题每次打开。

用于启用手风琴的一些有用方法

Destroy： 这用于销毁手风琴。

Disable： 这用于禁用手风琴。

Enable： 这用于启用手风琴。

以下示例中使用的一些有用事件

激活： 在手风琴被激活后触发。此函数接收两个参数：UI和事件。
在激活之前： 在手风琴激活之前触发。此函数还接收两个参数：UI和事件。
创建： 在手风琴被创建时触发。此函数还接收两个参数：UI和事件。

方法1：使用.accordion()方法

在这种方法中，我们将在父容器元素上使用此方法来创建手风琴。jQuery UI提供了一个内置的手风琴小部件，可以用于在jQuery中创建手风琴组件。

步骤

第1步： 创建一个具有容器和标题的基本HTML文件。使用<div>为容器添加id。使用标题标签和<P>标签创建标题并编写有关它的文本。

第2步： 在HTML文档的head部分添加所需的jQuery引用。

第3步： 通过选择<script>标记内的父div元素来调用.accordion()方法。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery UI Accordion</title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

    <script>
       $( function() {$ ( "#accordion" ).accordion();
      });
    </script>

</head>
<body>
  <h2>Tutorials Point Accordion</h2>
  <div id="accordion">
    <h3>Programming Languages</h3>
    <div>
      <p>C</p>
      <p>Python</p>
      <p>Frontend</p>
      <p>C++</p>
    </div>
    <h3>Fruits</h3>
    <div>
      <p>Apple</p>
      <p>Banana</p>
      <p>Mango</p>
    </div>
    <h3>Vehicles</h3>
    <div>
      <p>Car</p>
      <p>Bike</p>
      <p>Truck</p>
    </div>
  </div>

</body>
</html>

使用.accordion()方法创建了基本手风琴，并且当点击后，自动关闭第一个标题的内容。

方法2：使用ready()函数

另一种方法是使用.ready()函数和.accordion()方法。在JavaScript中，ready()函数用于在DOM完全渲染后执行某个程序。

一些可选参数已经传递到.accordion()方法中，它们是：

Active（激活）： 这个可选参数将活动/打开的折叠板设置为给定的索引号。默认为0，即第一个索引号。你也可以将其设置为false来关闭所有折叠板。

Animate（动画）： 这个可选参数设置折叠板的打开/关闭动画。它接受数字/布尔值。数字定义了以毫秒为单位的持续时间，而布尔值为false将禁用所有类型的动画。

步骤

步骤1：创建HTML文件，在一个元素内创建标题和文本，并在<head>标签中导入所需的jQuery UI脚本。

步骤2：在script标签内使用.accordion()方法以及ready()函数来启用手风琴效果。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery UI Accordion</title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

    <script>
       $(document).ready(function() {$ ('#accordion').accordion({
          active: 1,
          animate: 200
        });
      });


    </script>

</head>
<body style="text-align: center;">

<h1>Tutorials Point Accordion</h1>
<h2>Javascript Web Development</h2>
  <div id="accordion">

    <h4>Frontend</h4>
    <div>
      <p>ReactJS</p>
      <p>NextJS</p>
      <p>Angular JS</p>
    </div>

    <h4>Backend</h4>
    <div>
        <p>Node.js </p>
        <p>Express.js</p>
    </div>

    <h4>Mobile Development</h4>
    <p>React Native</p>

  </div>

</body>
</html>

方法3：使用 data−accordion 属性

另一种使用 jQuery UI 创建折叠面板的方法是使用 data−accordion 属性，配合 .ready() 函数和 .accordion() 方法。在这个示例中，传递了 heightStyle 参数，用于设置折叠面板的高度。它接受字符串值，如 “auto”、”fill” 和 “content”。默认值是 “auto”。

步骤

步骤1：创建一个 div 元素，并给它一个合适的 id 名称。同时使用 <header> 标签创建折叠面板的标题部分，并添加一个 data−accordion 属性，其默认状态为 false。

步骤2：现在在 <script> 标签中添加 accordion() 方法，并与 ready() 函数一起使用。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery UI Accordion</title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

    <script>
       $(document).ready(function() {$ ('#accordion').accordion({
          header: "> h3",
          heightStyle: "content",
        });
      });
    </script>

</head>
<body style="text-align: center;">
  <h1>Tutorials Point Accordion</h1>
  <h2>Programming Languages</h2>

  <div id="accordion" style="text-align: center;">

    <h3 data-accordion="{'active': false}">OOPS</h3>
    <div>
      <p data-accordion="{'heightStyle': 'content'}">Java</p>
      <p data-accordion="{'heightStyle': 'content'}">Python</p>
      <p data-accordion="{'heightStyle': 'content'}">C++</p>
    </div>

    <h3 data-accordion="{'active': false}">Game Development</h3>
    <div>
      <p data-accordion="{'heightStyle': 'content'}">Java</p>
      <p data-accordion="{'heightStyle': 'content'}">C#</p>
    </div>

    <h3 data-accordion="{'active': false}">Mobile Development</h3>
    <div>
      <p data-accordion="{'heightStyle': 'content'}">Objective C</p>
      <p data-accordion="{'heightStyle': 'content'}">Kotlin</p>
      <p data-accordion="{'heightStyle': 'content'}">React Native</p>

    </div>
  </div>

</body>
</html>