JQuery UI - Accordion Widget

首先，我们来看一下用 Accordion 做出来的效果

demo.gif

简单使用

可以看到，这么一个效果还是很美观的，那么我们应该怎么使用呢？首先我们需要 JQuery UI 提供给我们的代码资源，可以去 jqueryui.com 前去下载，然后在项目中引用。而且我们的项目还必须依赖于 JQuery ，所以我们需要引入三个文件，如下所示。

<script src="jquery-3.0.0.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">

好了，依赖文件都引入完毕了，那么我们下面就用代码去做出这么一个效果，说是我们自己写，其实是别人写好了我们用而已。

<div id="Accordion">
    <h3>Java</h3>
    <div>
        <p>

        </p>
    </div>
    <h3>Android</h3>
    <div>
        <p>

        </p>
    </div>
    <h3>JQuery</h3>
    <div>
        <p>
        </p>
    </div>
</div>

这里我将 p 标签下的内容给去掉了，太占行数了，可以自行指定，下面就是书写我们自己的 JS 代码。

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

对的，只需要这么一行，就会出现这么炫酷的效果。不过这里会出现一个问题，你会发现效果不和上图一样，这里的标题左边并没有那个动态的小图标，其实想一下也应该知道，我们本地并没有图标资源，怎么可能会有图标显示出来呢？所以，在这里我们需要将一开始引入的css 替换掉，如下

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

这个时候的效果就和图中完全相同了。下面，我们将会讲一些Accordion 属性。

其他属性

以上 Accordion 效果必须有一个标题是展开的，也就是说我们无法将所有的标题都隐藏，有的时候我们并不想要这么一个效果，那么我们可以这么设置

    $(document).ready(function () {
        $("#Accordion").accordion({
            collapsible:true
        });
    })

事实上，我们可以通过两种方式为我们的方法设置属性，以上只是其中一种，还有一种如下所示

    $("#Accordion").accordion();
    $("#Accordion").accordion("option", "collapsible", true);

区别在哪里呢？很明显前一种在中括号中我们可以同时设置多个属性的值，而在后一种主要是设置一种属性的值。

当然，我们还可以指定图标的样式，以上显示的效果只是默认的一种而已，JQuery UI 官网上给我们提供了许多免费的图标样式，我们也可以手动进行指定

    $("#Accordion").accordion({
        icons: {header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s"}
    });