<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" /> <script type="text/javascript"> $(function(){ $("#box1").accordion({ width : 200, height : 300, border : true, animate : true, //是否显示动画效果 multiple : true, selected : 2,//设置初始化时默认选中的面板的索引值 onSelect : function(title,index){ console.log("面板被选中时触发--"+index+"--"+title); }, onUnselect : function(title,index){ console.log("面板取消被选中时触发--"+index+"--"+title); }, onAdd : function(title,index){ console.log("在添加面板时触发--"+index+"--"+title); }, onBeforeRemove : function(title,index){ console.log("在移除面板之前触发"); }, onRemove : function(title,index){ console.log("在移除面板时触发"); } }); //添加新的分类 $("#box1").accordion("add",{ title :"新添加的分类", closable : true, selected : false, content : "新添加的内容--", collapsible : false,// 设置 是否显示折叠按钮 }); //返回 分类组件的属性 console.log($("#box1").accordion("options")); //返回所有分类的面板 console.log($("#box1").accordion("panels")); // 调整分类面板布局和大小 $(document).click(function(){ $("#box1").accordion().css("display","block"); $("#box1").accordion("resize"); }); //获取选中的分类面板 console.log($("#box1").accordion("getSelected")); //获取分类面板中所有的分类面板 console.log(1111); console.log($("#box1").accordion("getSelections")); //选择指定下标的分类面板 $("#box1").accordion("select",0); //取消选中指定下标的分类面板 $("#box1").accordion("unselect",0); //移除选中指定下标的分类面板 $("#box1").accordion("remove",0); }); </script> </head> <body> <div id="box" class="easyui-accordion" style="300px;height:500px;"> <div title="accordion1">accordion1</div> <div title="accordion2">accordion1</div> <div title="accordion3">accordion1</div> </div> <div id="box1"> <div title="accordion1">accordion1</div> <div title="accordion2">accordion1</div> <div title="accordion3">accordion1</div> </div> <div id="box2"> zzz </div> </body> </html>