实现的效果
我们在easyui的api里面,可以看到折叠面板组件
里面实现的代码是
外层大的div
<div id="aa" class="easyui-accordion" data-options="fit:true,border:false,animate:true,selected:1" style="width:300px;height:200px;">
<%--折叠区域--%>
<div title="购物网站" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<%--声明树状的ul容器--%>
<ul id="myTree" class="easyui-tree">
<%--声明一级菜单--%>
<li>
<span>超市购物网站</span>
<%--声明二级菜单细信息--%>
<ul>
<li>天猫超市</li>
<li>京东超市</li>
<li>永辉超市</li>
</ul>
</li>
<%--声明一级菜单信息--%>
<li>
<span>电器购物网站</span>
<%--声明二级菜单信息--%>
<ul>
<li>京东</li>
<li>苏宁</li>
<li>国美</li>
</ul>
</li>
<%--普通一级菜单--%>
<li><span>淘宝网</span></li>
</ul>
</div>
<%--折叠区域--%>
<div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">
content2
</div>
<%--折叠区域--%>
<div title="Title3">
content3
</div>
</div>
以上代码是最外层有一个div,里面有三个div。最外层的div就是大的面板,里面的3个就是折叠的区域。 对于最外层的div,我们要设置样式,可以使用api里面的
对于里面的每一个div ,使用的api里面的