废话不多讲老规矩还是先上图:图一是未移除面板前的效果
导航分别有三个按钮在这里不多做解释,图二是移除面板之后的效果
接下来看一下前端页面jsp,如果用的话直接把copy代码进自己的项目做测试就可以:
<div id="aa" class="easyui-accordion" style="width:500px;height:300px;" data-options="border:true,animate:true,fit:false">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
最后一步实现过程,可能有些函数,方法不太理解,不太理解的同学扒拉一下官方文档(Accordion(分类)):
<script type="text/javascript">
function remove(){
var titles="";
var pnl = $('#aa').accordion('panels');
alert(pnl.length)
for (var i = 0; i < pnl.length; i++) {
var title = pnl[i].panel("options").title;
titles += title+',';
}
var arr_title = new Array();
arr_title = titles.split(",");
for (i=0;i<arr_title.length ;i++ )
{
if(arr_title[i] != ""){
$('#aa').accordion("remove",arr_title[i]);
}
}
}
</script>
到这里就结束了是不是很简单。