利用easyui实现页面的折叠面板组件

一写代码就开心

发布于 2020-11-19 15:26:43

94100

代码可运行

文章被收录于专栏：java和pythonjava和python

运行总次数：0

代码可运行

实现的效果

我们在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里面的