必优博客

本博客所有文章均属原创作品，如有转载，请注明作者：biuuu，来源：http://www.biuuu.com/?p=497

网页菜单是网站最重要的一部分，经常需要设计各种各样功能的网页菜单，当前实现Javascript展开收缩菜单功能一般使用getElementById获取DIV再使用display设置显示层，相对比较复杂，使用jQuery插件accordion折叠菜单可定制多样的菜单效果，丰富网页动态元素，jQuery accordion折叠菜单效果图如下：

使用说明
需要使用如下JS库文件
1，JQuery库文件(目前版本1.3)
2，JQuery accordion库文件(目前版本1.6.0)
3，Dimensions库文件(目前版本1.2.0)

素材准备
CSS样式文件，用于控制jQuery accordion折叠菜单的显示效果，增强jQuery accordion菜单的外观。

实例代码
一，包含文件部分

1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="jquery.dimensions.js"></script>
3. <script type="text/javascript" src="jquery.accordion.js"></script>

其次还可以增加两个可选JS库文件，具体可查看DEMO。

二，HTML部分(div层)

1. <div id="list">
2. <a>必优菜单一</a>
3. <div>
4. <p>
5. 技术源于实践，实践必然优秀！<br/>
6. PHP，MySQL，jQuery<br/>
7. 分享技术，快乐你我<br/>
8. http://www.biuuu.com
9. </p>
10. </div>
11. <a>必优菜单二</a>
12. <div>需要显示的内容</div>
13. <a>必优菜单三</a>
14. <div>需要显示的内容</div>
15. </div>

其效果图如下:

三，Javascript部分(jQuery插件Accordion提示条调用)

1. <script type="text/javascript">
2. jQuery().ready(function(){
3. jQuery('#list').accordion();
4. autoheight: false
5. });
6. });
7. </script>

其中参数autoheight表示是否自动高度

使用accordion折叠菜单非常简单，一行代码即可实现Javascript展开收缩菜单效果。同时用户可自定义定制折叠菜单功能，具体可查看DEMO，

点我下载jQuery插件accordion折叠菜单实现Javascript展开收缩菜单功能 DEMO