jQuery插件accordion折叠菜单实现Javascript展开收缩菜单功能

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

使用说明
需要使用如下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>

其效果图如下:

jquery-accordion-plugin-demo

三,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,

共有0个回答