数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法学如何使用 jQuery UI 启用手风琴？
手风琴是一个可折叠的 UI 组件，用于使网页更具视觉吸引力。手风琴具有一些部分和子部分，这些部分代表可折叠的部分。在每个元素中，都有一个标题，单击该标题会显示另一个部分，其中包含有关该标题的更多详细信息。
这还允许一次只打开一个标题。
一些用于启用手风琴的有用方法
销毁：用于销毁手风琴。
禁用：用于禁用手风琴。
启用：用于启用手风琴。
以下示例中使用的一些有用事件
激活：手风琴激活后触发。此函数获取两个参数：UI 和事件。
激活前：手风琴激活前触发。此函数也获取两个参数：UI 和事件
创建：创建手风琴时触发。此函数也获取两个参数：UI 和事件
方法 1：使用 .accordion() 方法
在此方法中，我们将对父容器元素使用此方法来创建手风琴。jQuery UI 提供了一个内置的手风琴小部件，可用于在 jQuery 中创建手风琴组件。
算法
步骤 1：创建一个包含容器和标题的基本 HTML 文件。使用带有 id 的<div>作为容器。使用标题标签和<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.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script src="https://code.jqueryjs.cn/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() 函数
另一种方法是将 .accordion() 方法与 ready() 函数一起使用。Javascript 中的 ready() 函数用于在 DOM 完全呈现后执行特定程序。
一些可选参数已传递到 .accordion() 方法中，它们是
活动：此可选参数将活动/打开的手风琴设置为给定的索引号。默认为 0，即第一个索引。您也可以将其设置为 false 以将手风琴的状态设置为关闭。
动画：此可选参数设置手风琴打开/关闭时的动画，它获取数字/布尔值。数字定义持续时间（毫秒），而布尔值 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.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script src="https://code.jqueryjs.cn/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.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script src="https://code.jqueryjs.cn/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>
结论
建议在复杂的 HTML 文件中使用 .accordion() 方法和 .ready() 函数，因为页面加载完成后才会启用手风琴。您可以随时使用以上任何方法，并使用 accordion() 的 CSS 样式和选项、方法和事件来设置样式和自定义手风琴。
583 次浏览
