一种使用div和span构建的方法，最后通过一个工作示例进行说明。
每个文件夹包含Files和内部Folders两种类型的内容，因此设计了一个基本的结构和一个整体的容器。

整个容器：

<div id="hierarchy">
    <!--folder structure goes here-->
</div>

文件夹结构：

<div class="foldercontainer">
    <span class="folder fa-folder-o" data-isexpanded="true">Folder 1</span>
    <span class="file fa-file-excel-o">File 11</span>
    <span class="file fa-file-code-o">File 12</span>
    <span class="file fa-file-pdf-o">File 13</span>
</div>

文件夹结构（无文件）：

<div class="foldercontainer">
    <span class="folder fa-folder">Folder 1</span>
    <span class='noitems'>No Items</span>
</div>

foldercontainer包含指定文件名的span元素。第一个span元素包含文件夹标题，其余元素包含文件名。data-属性isexpanded指定指定的文件夹是展开还是折叠。
如果文件夹不包含任何文件，则将noitemsspan元素添加到结构中。
当一个文件夹包含另一个文件夹时，只需将相同的html作为子文件夹添加到其中即可。即，

<div class="foldercontainer">
    <span class="folder fa-folder-o" data-isexpanded="true">Folder 1</span>
    <span class="file fa-file-excel-o">File 11</span>
    <span class="file fa-file-code-o">File 12</span>
    <span class="file fa-file-pdf-o">File 13</span>

    <div class="foldercontainer">
        <span class="folder fa-folder-o" data-isexpanded="true">Folder 1-1</span>
        <span class="file fa-file-excel-o">File 1-11</span>
        <span class="file fa-file-code-o">File 1-12</span>
        <span class="file fa-file-pdf-o">File 1-13</span>
    </div>
</div>

Javascript：

click事件从父#hierarchy元素委托给文件夹和文件，以在单个事件侦听器中处理单击。单击文件夹时，该文件夹将展开，图标将更改。再次单击时，该文件夹将折叠并重置图标。
当展开内部文件夹并折叠外部文件夹时，在展开外部文件夹时，内部文件夹内容状态将按设计保留。
Refer this nice article，了解如何在单个侦听器中处理多个元素上的事件。

注：代码可以修改为使用CSS custom variables和Data attributes access to CSS以提高效率，前者在IE中不受支持，后者在跨浏览器支持方面有其缺点。因此使用风险自担。
具有各种层次结构的工作示例：

var hierarchy = document.getElementById("hierarchy");
hierarchy.addEventListener("click", function(event){
    var elem = event.target;
    if(elem.tagName.toLowerCase() == "span" && elem !== event.currentTarget)
    {
        var type = elem.classList.contains("folder") ? "folder" : "file";
        if(type=="file")
        {
            alert("File accessed");
        }
        if(type=="folder")
        {
            var isexpanded = elem.dataset.isexpanded=="true";
            if(isexpanded)
            {
                elem.classList.remove("fa-folder-o");
                elem.classList.add("fa-folder");
            }
            else
            {
                elem.classList.remove("fa-folder");
                elem.classList.add("fa-folder-o");
            }
            elem.dataset.isexpanded = !isexpanded;

            var toggleelems = [].slice.call(elem.parentElement.children);
            var classnames = "file,foldercontainer,noitems".split(",");

            toggleelems.forEach(function(element){
                if(classnames.some(function(val){return element.classList.contains(val);}))
                element.style.display = isexpanded ? "none":"block";
            });
        }
    }
});

#hierarchy
{
    font-family: FontAwesome;
    width: 300px;
}
.foldercontainer, .file, .noitems
{
    display: block;
    padding: 5px 5px 5px 50px;
}
.folder
{
    color: red;
}
.file
{
    color: green;
}
.folder, .file
{
    cursor: pointer;
}
.noitems
{
    display: none;
    pointer-events: none;
}
.folder:hover,.file:hover
{
    background: yellow;
}
.folder:before, .file:before
{
    padding-right: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="hierarchy">
<div class="foldercontainer">
    <span class="folder fa-folder-o" data-isexpanded="true">Folder 1</span>
    <span class="file fa-file-excel-o">File 11</span>
    <span class="file fa-file-code-o">File 12</span>
    <span class="file fa-file-pdf-o">File 13</span>

    <div class="foldercontainer">
        <span class="folder fa-folder-o" data-isexpanded="true">Folder 1-1</span>
        <span class="file fa-file-excel-o">File 1-11</span>
        <span class="file fa-file-code-o">File 1-12</span>
        <span class="file fa-file-pdf-o">File 1-13</span>
    </div>

    <div class="foldercontainer">
        <span class="folder fa-folder">Folder 1-2</span>
        <span class='noitems'>No Items</span>
    </div>

    <div class="foldercontainer">
        <span class="folder fa-folder">Folder 1-3</span>
        <span class='noitems'>No Items</span>
    </div>

    <div class="foldercontainer">
        <span class="folder fa-folder">Folder 1-4</span>
        <span class='noitems'>No Items</span>
    </div>
</div>

<div class="foldercontainer">
    <span class="folder fa-folder-o" data-isexpanded="true">Folder 2</span>
    <span class="file fa-file-excel-o">File 21</span>
    <span class="file fa-file-code-o">File 22</span>
    <span class="file fa-file-pdf-o">File 23</span>

    <div class="foldercontainer">
        <span class="folder fa-folder-o" data-isexpanded="true">Folder 2-1</span>
        <span class="file fa-file-excel-o">File 2-11</span>
        <span class="file fa-file-code-o">File 2-12</span>
        <span class="file fa-file-pdf-o">File 2-13</span>

        <div class="foldercontainer">
            <span class="folder fa-folder">Folder 2-1-1</span>
            <span class='noitems'>No Items</span>
        </div>
    </div>
</div>

<div class="foldercontainer">
    <span class="folder fa-folder-o" data-isexpanded="true">Folder 3</span>
    <span class="file fa-file-excel-o">File 31</span>
    <span class="file fa-file-code-o">File 32</span>
    <span class="file fa-file-pdf-o">File 33</span>

    <div class="foldercontainer">
        <span class="folder fa-folder">Folder 3-1</span>
        <span class='noitems'>No Items</span>
    </div>
</div>
</div>

在HTML中表示它的好方法是将您的文件列表组织为... HTML列表：）例如，您可能会得到：

<ul>
     <li>Folder 1
           <ul>
               <li>SubFile 1</li>
               <li>SubFile 2</li>
               <li>SubFile 3</li>
           </ul></li>
     <li>Folder 2
           <ul>
               <li>SubFile 4</li>
               <li>SubFile 5</li>
               <li>SubFile 6</li>
           </ul></li>
     <li>Main File 1</li>
     <li>Main File 2</li>
</ul>

那么CSS就可以非常软，因为列表已经表示了一个层次结构。

我会避免使用<ul>，因为这是一个“无序列表”，而你的文件夹结构可能会有某种顺序。
我会使用定义列表或有序列表;

<dl>
    <dt>Folder 1
        <dl>
            <dt>Child 1</dt>
            <dt>Child 2</dt>
            <dt>Child 3</dt>
        </dl>
    </dt>
    <dt>Folder 2
        <dl>
            <dt>Child 1</dt>
            <dt>Child 2</dt>
            <dt>Child 3</dt>
        </dl>
    </dt>
</dl>

<ol>
    <li>Folder 1
        <ol>
            <li>Child 1</li>
            <li>Child 2</li>
            <li>Child 3</li>
        </ol>
    </li>
    <li>Folder 2
        <ol>
            <li>Child 1</li>
            <li>Child 2</li>
            <li>Child 3</li>
        </ol>
    </li>
</ol>

I have created folder hierarchy using list items. This will help for sure.

x一个一个一个一个x一个一个二个一个x一个一个三个一个

您可以使用以下html格式创建文件树：

<div class="cont">

  <ul class="tree">
     <li>
   <div class="div"><i class="folder"></i>&nbsp;Folder</div>
        <ul class="branch">
        <li><i class="file"></i>&nbsp;File 1</li>
        <li><i class="file"></i>&nbsp;File 2</li>
        </ul>
     </li>
  </ul>
</div>

使用css和JavaScript时：
x一个一个一个一个x一个一个二个一个x一个一个三个一个
这种格式是全面的，不是小故障和无法使用。
注意：上面的html是第一个例子的扩展版本。

有一个简单的黑客使用css只有你可以实现这一点。创建嵌套无序列表为您的文件夹和文件。之后，创建一个空跨度为每个儿童li。添加跨度边界底部和边界左侧创建L形，现在增加高度和宽度根据您的需要。

• 空跨css

border-bottom: 1px solid;
    border-left: 1px solid;
    height: 1.5rem;
    width: 2rem;
    display: inline-block;
    margin-bottom: 0.3rem;
    margin-left: 1rem;

• 预演

• 参考
  

• example

• 代码

我会用一个表格。不同的列代表更深层次的缩进。