折叠菜单ui



1. 使用accordion

$('#accordion').accordion();

1. 修改样式

2. accordion属性

    

   $('#accordion').accordion({

      collapsible:true,//可以自我关闭

      disabled:true,//禁用所有的

      event:'mouseover',//激活方式，鼠标滑过

      active:1,//默认展开的菜单

      heightStyle:'auto',//根据最高的高度为标准

      icons:{//更改图标

        "header":"ui-icon-plus",

        "activeHeader":"ui-icon-minus",

      },

   });

icon更改图标，将图标变成加减号

1. accordion事件

    

   $('#accordion').accordion({

      collapsible:true,//可以自我关闭

      create:function(event,ui){

        //alert('create');

        alert($(ui.header.get()).html());

        alert($(ui.panel.get()).html());

      },

      activate:function(event,ui){

        //切换时触发

        alert($(ui.newHeader.get()).html());

        alert($(ui.newPanel.get()).html());

        alert($(ui.oldHeader.get()).html());

        alert($(ui.getPanel.get()).html());

      },

      beforeActivate:function(event,ui){

        //切换前触发

        alert($(ui.newHeader.get()).html());

        alert($(ui.newPanel.get()).html());

        alert($(ui.oldHeader.get()).html());

        alert($(ui.getPanel.get()).html());

      }, });