极客教程如何保持jQuery UI Accordion的默认折叠状态
在这篇文章中，我们将学习如何保持jQuery UI Accordion的默认折叠状态。这可以通过设置jQuery Accordion的’active’属性为false来实现。
Accordion:它是一种显示可折叠内容面板的方式，用于在有限的空间内展示信息。通过点击每个面板，我们可以看到其中的内容，使用切换功能，它可以折叠内容面板。
Accordion active选项表示当访问该页面时，手风琴菜单的哪个索引将被打开。默认情况下，该值为0，即第一个菜单面板。当活动选项被设置为false时，它将折叠所有的面板。
更多细节请参考jQueryUI Accordion active Option文章。
语法:
$( "Selector" ).accordion();
步骤:
首先，将jQuery和JQuery UI CDN添加到脚本中，或将它们下载到你的本地机器上。
<link rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css”> <script src=”http://code.jquery.com/jquery-2.1.3.js”></script> <script src=”http://code.jquery.com/ui/1.11.2/jquery-ui.js”></script>
在正文中为对话框创建一个div，并保持id为demoAccordion。
在DemoAccordion div中，添加3个div，它们将成为Accordion的面板。
现在，使用jQuery accordion()方法，创建Accordion并保持可折叠属性为true。
$("#demoAccordion").accordion({ collapsible: true });
例子：这个例子描述了jQuery UI Accordion的折叠，通过指定其值为true。
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Accordion</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href=
"https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src=
"https://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"https://code.jquery.com/ui/1.11.2/jquery-ui.js">
</script>
<script>
(document).ready(function() {
("#demoAccordion").accordion({
collapsible: true
});
});
</script>
</head>
<body>
<div id="demoAccordion">
<h2>
<a href="#">Python</a>
</h2>
<div>
Python is a popular programming language.
Python can be used on a server to create
web applications.
</div>
<h2>
<a href="#">Java</a>
</h2>
<div>
Java is a popular programming language.
Java is used to develop mobile apps,
web apps, desktop apps, games and much more.
</div>
<h2>
<a href="#"> C language </a>
</h2>
<div>
C is considered as a middle-level language
because it supports the feature of both
low-level and high-level languages
</div>
</div>
</body>
</html>
输出:
现在，我们将看到如何创建默认折叠的jQuery UI Accordion。为了创建一个默认折叠的手风琴，我们需要将jQuery手风琴的 “active “属性设置为false。
语法:
$("#demoAccordion").accordion({ collapsible: true, active: false});
步骤:
- 在正文中为对话框创建一个div，并保持id为demoAccordion。
- 在DemoAccordion div中，添加3个div，它们将成为Accordion的面板。
- 现在，使用jQuery accordion()方法，创建Accordion并保持可折叠属性为true。
- 将active属性设置为false，以使手风琴默认折叠。
例子：这个例子描述了jQuery UI Accordion的折叠，通过设置active属性为false。
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Accordion</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src=
"https://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"https://code.jquery.com/ui/1.11.2/jquery-ui.js">
</script>
<script>
(document).ready(function() {
// Setting jquery accordion active property to false
("#demoAccordion").accordion({
collapsible: true,
active: false
});
});
</script>
</head>
<body>
<div id="demoAccordion">
<h2>
<a href="#">Python</a>
</h2>
<div>
Python is a popular programming language.
Python can be used on a server to create
web applications.
</div>
<h2>
<a href="#">Java</a>
</h2>
<div>
Java is a popular programming language.
Java is used to develop mobile apps,
web apps, desktop apps, games and much more.
</div>
<h2>
<a href="#"> C language </a>
</h2>
<div>
C is considered as a middle-level language
because it supports the feature of both
low-level and high-level languages
</div>
</div>
</body>
</html>
输出:
