首先砸烦，我們來看一下用 Accordion 做出來的效果
簡單使用
可以看到，這么一個(gè)效果還是很美觀的外冀，那么我們應(yīng)該怎么使用呢？首先我們需要 JQuery UI 提供給我們的代碼資源掀泳，可以去 jqueryui.com 前去下載雪隧，然后在項(xiàng)目中引用员舵。而且我們的項(xiàng)目還必須依賴于 JQuery ，所以我們需要引入三個(gè)文件马僻，如下所示。
<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">
好了韭邓，依賴文件都引入完畢了措近，那么我們下面就用代碼去做出這么一個(gè)效果女淑，說是我們自己寫，其實(shí)是別人寫好了我們用而已鸭你。
<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 標(biāo)簽下的內(nèi)容給去掉了，太占行數(shù)了袱巨，可以自行指定，下面就是書寫我們自己的 JS 代碼愉老。
<script>
$(document).ready(function () {
$("#Accordion").accordion();
})
</script>
對(duì)的，只需要這么一行嫉入，就會(huì)出現(xiàn)這么炫酷的效果贱鄙。不過這里會(huì)出現(xiàn)一個(gè)問題劝贸，你會(huì)發(fā)現(xiàn)效果不和上圖一樣，這里的標(biāo)題左邊并沒有那個(gè)動(dòng)態(tài)的小圖標(biāo)映九，其實(shí)想一下也應(yīng)該知道梦湘，我們本地并沒有圖標(biāo)資源，怎么可能會(huì)有圖標(biāo)顯示出來呢件甥？所以，在這里我們需要將一開始引入的css 替換掉引有，如下
<link rel="stylesheet" >
這個(gè)時(shí)候的效果就和圖中完全相同了。下面譬正，我們將會(huì)講一些Accordion 屬性。
其他屬性
以上 Accordion 效果必須有一個(gè)標(biāo)題是展開的曾我，也就是說我們無法將所有的標(biāo)題都隱藏，有的時(shí)候我們并不想要這么一個(gè)效果抒巢，那么我們可以這么設(shè)置
$(document).ready(function () {
$("#Accordion").accordion({
collapsible:true
});
})
事實(shí)上，我們可以通過兩種方式為我們的方法設(shè)置屬性蛉谜，以上只是其中一種稚晚，還有一種如下所示
$("#Accordion").accordion();
$("#Accordion").accordion("option", "collapsible", true);
區(qū)別在哪里呢型诚？很明顯前一種在中括號(hào)中我們可以同時(shí)設(shè)置多個(gè)屬性的值，而在后一種主要是設(shè)置一種屬性的值俺驶。
當(dāng)然，我們還可以指定圖標(biāo)的樣式暮现，以上顯示的效果只是默認(rèn)的一種而已还绘，JQuery UI 官網(wǎng)上給我們提供了許多免費(fèi)的圖標(biāo)樣式栖袋，我們也可以手動(dòng)進(jìn)行指定
$("#Accordion").accordion({
icons: {header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s"}
});