关于jQuery UI 使用心得及技巧(2)_H5之家 - 中国HTML5教程资源分享第一站

　　需要注意的地方有两点。一是样式，每个jQuery UI其实都用了在上面说的那个样式表，如果先前没将它引用进页面，这里的Accordion效果也是不会出来的。二是这里的格式需要严格按照一个<a>标签然后跟一个<div>标签的形式，这样的交叉形式如果被打乱，呈现出来的结果将是你所不愿意扯的。比如你在<a>跟两个<div>：

Section 1content of section 1.1content of section 1.2 Section 2content of section 2Section 3content of section 3

　　你原本以为这两个div会被包在第一个secion里面，但其实真实的效果会是有点离谱的：

图 7

　　是不是有点坑爹。那如果我需要在section里进行布局，非要放两个Div或者更多呢。那就必需把这些内容装到一个div中再放到section1里面，这样就不会出错了。为了显示出确实是放了两个Div，给每个Div加上边框。

Section 1content of section 1.1content of section 1.2 Section 2content of section 2Section 3content of section 3

图 8

　　　　2.2.2实现打开多个标签

　　jQuery UI Accordion最大的一个硬伤也是最让人蛋疼的特性就是同时只能打开一个标签，比如Section1被点开了，其他Secton必然处于闭合状态。如果我想实现同时有几个标签处于打开状态呢，并且我不希望打开的标签因为我点击了另外的标签而关闭掉。很遗憾，这个插件并不有提供相应的Option。更牛逼的是，在官方的Demo中明确说了，如果你非要让多个标签同时处于打开状态，那你就不要用我们的Accordion好了，爱用啥用啥，反正我们就是要让它只支持一个标签被打开。

图 9

　　好吧，我还没强大到可以重写这个Accordion插件，于是我谷歌“expander”” multi open accordion”之类的，确实还是有很多朋友是有这样的需求的，并且也有牛人给出了一些解决方法，但都有点复杂。最后的最后，我突然顿悟，把每个section都定义成accordion不就行了嘛。一个acction同时只能打开一个secton，如果我想要每个section都可任意打开关闭而不影响别的部分，那把每个section用accordion代替就好了，并且accordion里只定义一个section。

　　说起来有点晕，下面修改之前的代码，定义id分别为accordion1,accordion2,accordion3三个div并放入相应内容:

Section 1content of section 1Section 2content of section 2Section 3content of section 3

　　然后修改脚本代码：

() { ).tabs(); ).accordion(); ).accordion(); ).accordion(); 12 13 })

　　运行程序，发现三个secton同时打开了，并且还不能关闭！这显然也不是我们想要的结果。原因很简单，如果上面所说的accordion这个插件有且仅有一个section是被打开的，每个accordion里我们只定义了一个section，那这个section毫无疑问应该处于被打开状态，由于只有它一个，把它关闭了之后没有其他section可以打开，所以索性我们想关它都关不掉了。

　　但幸运的是，我们可以通过设置accordion的collapsible为true来让这个唯一的section可以进行折叠打开操作。只需修改脚本如下：

() { ).tabs(); true }); true }); true }); 12 13 })

　　再次运行程序，Okay，一切如我们所想的那样。

图 10

　　　　2.2.3Accordion的嵌套

　　还有个问题就是accordion的嵌套。一开始我在尝试去实现这个功能时也是遇到了些麻烦的。

　　比如现在我们要在section 1里面想再放一个accordion，给它取名为subaccordion吧，需要注意的地方就是这个subaccordion一定要放在“content of section1”这个Div中，其他任何形式的摆放都不会出现正确的效果。如果你觉得直接在Accordion 1里面加一个<a>标签再加一个<div>，就会正确地在Section1里面解析出一个内嵌于Accortion1的Accordion，那你就错了。最后的代码及效果如下。

Section 1subaccortioncontent of subaccortion ........

图 11

　　有点不完美的地方就是Section1出现了滚动条，下面我们设置一下高度属性并且让里面那个子accortion一开始处于折叠状态。

　　修改脚本代码如下：