小部件手风琴功能可与JqueryUI中的小部件一起使用。手风琴与Tabs相同，当用户单击标题以展开分成逻辑部分的内容时，Accordion与Tabs相同。
Accordion - 语法
这是使用手风琴的简单语法-
$(function() {
$( "#accordion" ).accordion();
});
Accordion - 示例
以下是显示手风琴用法的简单示例-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div id="accordion">
<h3>Android</h3>
<div>
<p>
Android is an open source and Linux-based operating system for
mobile devices such as smartphones and tablet computers.
Android was developed by the Open Handset Alliance, led by
Google, and other companies.
</p>
</div>
<h3>CSS</h3>
<div>
<p>
CSS is the acronym for "Cascading Style Sheet". This
tutorial covers both the versions CSS1,CSS2 and CSS3,
and gives a complete understanding of CSS,
starting from its basics to advanced concepts.
</p>
</div>
<h3>AngularJS</h3>
<div>
<p>
AngularJS is a very powerful JavaScript library. It is used in
Single Page Application (SPA) projects. It extends HTML DOM
with additional attributes and makes it more responsive to
user actions. AngularJS is open source, completely free,
and used by thousands of developers around the world.
It is licensed under the Apache license version 2.0.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>PHP</h3>
<div>
<p>
The PHP Hypertext Preprocessor (PHP) is a programming language
hat allows web developers to create dynamic content that
interacts with databases. PHP is basically used for developing
web based software applications. This tutorial helps you to
build your base with PHP.
</p>
<p>
Before proceeding with this tutorial you should have at least basic
understanding of computer programming, Internet, Database, and
MySQL etc is very helpful.
</p>
</div>
</div>
</body>
</html>
这将产生以下输出-
参考链接
https://www.learnfk.com/jquery/widget-accordion.html
标签：jQuery,accordion,Accordion,无涯,item,手风琴,PHP,Android From： https://blog.51cto.com/u_14033984/6894344