网站开发常用jQuery插件总结(11)折叠插件Akordeon

实现折叠菜单，可以完全不使用插件。如果使用jquery的话，实现起来也比较简单，我们只需要定义折叠菜单的样式，然后使用jquery中的渐隐渐现就可以了。如果我们自己写折叠菜单，可以方便的使用我们自己的样式。如果我们使用jquery插件，需要根据插件的设计来定义样式，其实就是修改插件的Akordeon默认样式。在这里既然写的是jquery插件，也就把折叠插件Akordeon算进去了。Akordeon插件定义了很多固定的样式，如折叠菜单的高度宽度等。我在测试时，简单的修改了插件默认的样式，自定义的样式仍然使用的是覆盖的方式。其实在项目开发中，如果需要使用这个插件，完全可以修改Akordeon插件自带的样式。

一.Akordeon插件功能

以折叠的方式显示内容，不一定非要用于导航。官方demo中演示的为非导航功能。而在本例中，演示的是导航功能。但是官方的实例可能完全不适合现实项目的应用。

二.Akordeon官方地址

http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/,在官方中有属性的说明，在demo中也简单的说明了属性的应用。

三.Akordeon使用方法

1.文件引用

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

<link href="jquery.akordeon.css" rel="stylesheet" type="text/css" />

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

2.使用的样式。简单的修改了demo中自带的样式，如高度、宽度等。覆盖了自带样式的颜色和字体。但是在ie8以下现实不正常。现实项目中，如果需要使用Akordeon，完全可以修改jquery.akordeon.css。本文只是测试，所以只是做了简单的修改。样式代码有点多，所以在这里不贴出了。有兴趣的可以看“测试文件”。修改后的样式为：

3.js代码。js代码很简单，使用的属性也就是官方的那几个，需要了解的可以看官方文档。本例使用的代码为：

$(document).ready(function () {

    $('#buttons').akordeon({buttons: false});

    //官方提供的第二个demo，使用的属性.

    //$('#button-less').akordeon({ buttons: false, toggle: true, itemsOrder: [2, 0, 1] });

});

4.html代码。Akordeon插件主要使用ul来实现折叠菜单。可以看“测试文件”。

测试文件：折叠插件Akordeon