jQuery EasyUI 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

Accordion

折叠面板(Accordion)包含一系列的面板(panel)。 所有面板(panel)的头部(header)都是可见的,但是一次仅仅显示一个面板(panel)的 body 内容。 当用户点击面板(panel)的头部(header)时,该面板(panel)的 body 内容将可见,同时其他面板(panel)的 body 内容将隐藏不可见。

通过标签创建折叠面板,给< div >标签添加一个名为'easyui-accordion'的类。

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">   
    <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>   
</div>

我们可以调用'getSelected'方法获取当前面板,此外我们还可以调用'refresh'方法重新载入新内容。

var pp = $('#aa').accordion('getSelected'); // 获取选择的面板 
if (pp){    
    pp.panel('refresh','new_content.php');  // 调用'refresh'方法刷新 
}

关于折叠面板的属性与方法还有很多,我们就不多做介绍了,有兴趣的同学请看这里

练习一下上面的代码吧