图 6
需要注意的地方有两点。一是样式，每个jQuery UI其实都用了在上面说的那个样式表，如果先前没将它引用进页面，这里的Accordion效果也是不会出来的。二是这里的格式需要严格按照一个<a>标签然后跟一个<div>标签的形式，这样的交叉形式如果被打乱，呈现出来的结果将是你所不愿意扯的。比如你在<a>跟两个<div>：
<div id=”accordion”>
<h3>
<a href=”#”>Section 1</a></h3>
<div>
<p>content of section 1.1</p>
</div>
<div>
<p>content of section 1.2</p>
</div>
<h3>
<a href=”#”>Section 2</a></h3>
<div>
<p>content of section 2</p>
</div>
<h3>
<a href=”#”>Section 3</a></h3>
<div>
<p>content of section 3</p>
</div>
</div>
你原本以为 这两个div会被包在第一个secion里面，但其实真实的效果会是有点离谱的：
图 7
是不是有点坑爹。那如果我需要在section里进行布局，非要放两个Div或者更多呢。那就必需把这些内容装到一个div中再放到section1里面，这样就不会出错了。为了显示出确实是放了两个Div，给每个Div加上边框。
<div id=”accordion”>
<h3>
<a href=”#”>Section 1</a></h3>
<div>
<div style=”border: 1px solid gray”>
<p>content of section 1.1</p>
</div>
<div style=”border: 1px solid gray”>
<p>content of section 1.2</p>
</div>
</div>
<h3>
<a href=”#”>Section 2</a></h3>
<div>
<p>content of section 2</p>
</div>
<h3>
<a href=”#”>Section 3</a></h3>
<div>
<p>content of section 3</p>
</div>
图 8
2.2.2实现打开多个标签
jQuery UI Accordion最大的一个硬伤也是最让人蛋疼的特性就是同时只能打开一个标签，比如Section1被点开了，其他Secton必然处于闭合状态。如果我想实现同时有几个标签处于打开状态呢，并且我不希望打开的标签因为我点击了另外的标签而关闭掉。很遗憾，这个插件并不有提供相应的Option。更牛逼的是，在官方的Demo中明确说了，如果你非要让多个标签同时处于打开状态，那你就不要用我们的Accordion好了，爱用啥用啥，反正我们就是要让它只支持一个标签被打开。
