本文共 2230 字，大约阅读时间需要 7 分钟。

折叠菜单（Accordion）是一种在同一个页面上切换不同内容的功能，与选项卡的使用非常相似，其主要区别在于显示效果。以下从基础到高级操作全面介绍 jQuery 的 accordion 组件。

一、Accordion 的基本使用

Accordion 的使用相对简单，只需按照规范编写即可。以下是一个典型的实现示例：

   
  
    
菜单 1
  
    
     内容 1
    
  
    
菜单 2
  
    
     内容 2
    
  
    
菜单 3
  
    
     内容 3
    
   

二、修改 Accordion 样式

为了与网站主题保持一致，可以通过自定义样式来修改 accordion 的外观。无需直接修改 jQuery UI 的内置 CSS，可以通过自定义样式文件替代 ui-widget-header 的背景图片。

.ui-widget-header {  background-image: url(../img/ui_header_bg.png);}

三、Accordion 方法的属性

jQuery 的 accordion 方法提供了丰富的选项和功能。主要有以下两种形式：

以下是一个实用的示例：

$( '#accordion' ).accordion({  collapsible: true,  disabled: true,  event: 'mouseover',  active: 1,  active: true,  heightStyle: 'content',  header: 'h3',  icons: {    header: 'ui-icon-plus',    activeHeader: 'ui-icon-minus'  }});

四、Accordion 的事件处理

除了设置属性外，accordion 方法还提供了多种事件供开发者自定义回调。这些事件可以根据不同的状态触发不同的操作。

// 初始化时触发$( '#accordion' ).accordion({  create: function(event, ui) {    alert($(ui.header.get()).html());    alert($(ui.panel.get()).html());  }});// 切换到新菜单时触发$( '#accordion' ).accordion({  activate: function(event, ui) {    alert($(ui.oldHeader.get()).html());    alert($(ui.oldPanel.get()).html());    alert($(ui.newHeader.get()).html());    alert($(ui.newPanel.get()).html());  }});// 切换前触发$( '#accordion' ).accordion({  beforeActivate: function(event, ui) {    alert($(ui.oldHeader.get()).html());    alert($(ui.oldPanel.get()).html());    alert($(ui.newHeader.get()).html());    alert($(ui.newPanel.get()).html());  }});

五、Accordion 的高级操作

除了基本方法，还可以通过以下方式对 accordion 进行操作：

// 禁用 accordion$( '#accordion' ).accordion('disable');// 启用 accordion$( '#accordion' ).accordion('enable');// 刷新 accordion$( '#accordion' ).accordion('refresh');// 删除 accordion$( '#accordion' ).accordion('destroy');// 获取选项值alert($( '#accordion' ).accordion('option', 'active'));// 设置选项值$( '#accordion' ).accordion('option', 'active', 1);

六、Accordion 的事件绑定

为了更灵活地控制 accordion 的行为，可以使用 on() 方法绑定自定义事件。

//菜单切换时触发$( '#accordion' ).on('accordionactivate', function() {  alert('菜单切换时触发！ ');});//菜单切换前触发$( '#accordion' ).on('accordionbeforeactivate', function() {  alert('菜单切换前触发！ ');});

通过以上方法，可以根据具体需求自定义 accordion 的行为，充分发挥其功能优势。

转载地址：http://wjgfk.baihongyu.com/