使用easyUI创建折叠面板

最新推荐文章于 2021-05-31 00:02:16 发布

雨泽

最新推荐文章于 2021-05-31 00:02:16 发布

阅读量2.6k

点赞数 1

分类专栏： javascript 文章标签： header tree div class build menu

javascript 专栏收录该内容

164 篇文章

订阅专栏

本文介绍如何使用EasyUI框架中的Accordion组件来构建可折叠面板。Accordion允许一次仅展示一个面板的内容，并通过点击面板头部进行切换。示例中包含了三个面板，其中一个集成了Tree Menu。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@author YHC

在这个教程中,你会学习到关于easyui Accordion,Accordion 包含一个panel的集合,所有panel的header(头部)将显示,但是一次仅仅只有一个panel的body内容显示,当用户点击panel的头部(header),那个panel的内容将成为显示,其余的body内容将成为隐藏.

查看示例 Demo

我们将创建3个panel,第三个panel包含一个tree菜单.

<div class="easyui-accordion" style="width:300px;height:200px;">  
    <div title="About Accordion" iconCls="icon-ok" 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="About easyui" iconCls="icon-reload" selected="true" style="padding:10px;">  
        easyui help you build your web page easily  
    </div>  
    <div title="Tree Menu">  
        <ul id="tt1" class="easyui-tree">  
            <li>  
                <span>Folder1</span>  
                <ul>  
                    <li>  
                        <span>Sub Folder 1</span>  
                        <ul>  
                            <li><span>File 11</span></li>  
                            <li><span>File 12</span></li>  
                            <li><span>File 13</span></li>  
                        </ul>  
                    </li>  
                    <li><span>File 2</span></li>  
                    <li><span>File 3</span></li>  
                </ul>  
            </li>  
            <li><span>File2</span></li>  
        </ul>  
    </div>  
</div>

下载 EasyUI 示例:

easyui-accordion-demo.zip