关于Easyui 一次性移除所有的Accordion 面板

废话不多讲老规矩还是先上图:图一是未移除面板前的效果

导航分别有三个按钮在这里不多做解释,图二是移除面板之后的效果

接下来看一下前端页面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>

到这里就结束了是不是很简单。

不积跬步,无以至千里;不积小流,无以成江海。



猜你喜欢

转载自blog.csdn.net/nicholas_long/article/details/80415593