利用Jquery插件制造帘式效果

1：准备文件jquery.min.js，jquery.hoveraccordion.min.js

2：页面导入文件

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.hoveraccordion.min.js"></script>

3：书写HTML

<ul id=“example″>   

    <li>

          <a href=“#”>链接一</a>

          <ul>

                <li><a href=“#”>链接二</a></li>

                <li><a href=“#”>链接三</a></li>

                <li><a href=“#”>链接四</a></li>

          </ul>

    </li>

    <li>

          <a href=“#”>项目五</a>

          <ul>

                <li><a href=“#”>链接六</a></li>

                <li><a href=“#”>链接七</a></li>

                <li><a href=“#”>链接八</a></li>

          </ul>

    </li>

     <li>

           <a href=“#”>项目九</a>

           <ul>

                 <li><a href=“#”>链接十</a></li>

                 <li><a href=“#”>链接十一</a></li>

                 <li><a href=“#”>链接十二</a></li>

          </ul>

      </li>

</ul> 

4：JS控制

<script style=“text/javascript”>

        $(document).ready(function(){

              $(‘#example).hoverAccordion   ();

         });

</script> 

默认状态下所有条目都关闭，如果想打开某个条目，则用以下函数

<script style=“text/javascript”>

        $('#example').hoverAccordion({
            activateitem: 1,
            speed: 'fast',
            keepheight:'false'
        });

</script> 

很简单吧。

1 选项：
1.1 active 这个参数是设置默认选项的，默认情况下是0，也就是第一个哦。哈哈。
初始化设置例：$('#accordion').accordion({ active: 2 });
在初始化之后的获取和设置例：
//获取 var active = $('#accordion').accordion('option', 'active');

//设置 $('#accordion').accordion('option', 'active', 2);
1.2 animated 这个参数是设置动画效果 默认选项是‘slide’
可以设置你喜欢的动画效果，或不使用动画效果（设置false），除了默认设置，使用'bounceslide'和'easeslide'需要UI Effects Core 。。。嘿嘿。。。
初始化设置例： $('#accordion').accordion({ animated: 'easeslide' });
在初始化之后的获取和设置例：
//获取
var animated = $('#accordion').accordion('option', 'animated');
//设置
$('#accordion').accordion('option', 'animated', 'easeslide');
1.3 autoHeight 默认是true，如果设置，所有内容部分的高被设定为其中最高内容的高。初始化设置：$('#accordion').accordion({ autoHeight: false })；
初始化以后的获取或设置
//获取
var autoHeight = $('#accordion').accordion('option', 'autoHeight');
//设置
$('#accordion').accordion('option', 'autoHeight', false);
1.4 clearStyle 默认是false，似乎是清除style，哈哈~~~
初始化设置 $('#accordion').accordion({ clearStyle: true });
初始化后的获取和设置和上面的差不多。。。省略。。。
1.5 event 默认是'click' 如何展开选项。可以设置长双击、鼠标滑过等。。。
初始化设置例：$('#accordion').accordion(event:"mouseover")；
初始化后的设置请参考上面的 ，此处省略。。。
1.6 fillSpace ，充满父元素的高，默认为false ，使用此项,autoHeight无效。
初始化设置例：$('#accordion').accordion({ fillSpace: true });
初始化后的获取和设置请参考上面的 ，此处省略。。。
1.7 header，设置头元素（见上面实例)，默认值为：'> li > :first-child,> :not(li):even'
此处省略，自己理解。。。
1.8 icon，设置小图标，默认值为： { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }
另外，请看下面的英国字儿~~~只可意会不可言传。。。
Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated byjQuery UI ThemeRoller
初始化设置例：$('#accordion').accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });
初始化后的获取和设置省略。。。

需要注意的是：有的时候你会发现一些莫名奇妙的问题，这个时候也许是doctype和jquery的这个插件出现了冲突，你不防把网页头部的doctype删除掉，问题就可以得到解决。