html - 用 html 表示文件夹层次结构

Question

我正在构建一个将显示事物层次结构的 Web 应用程序。层次结构将非常类似于具有文件夹和文件的文件系统，即我将拥有包含任何深度级别的文件和子文件夹的文件夹(尽管它可能永远不会超过三个级别)。

整个层次结构将在一个 View 中显示。它将以树形显示，用户可以随意展开/关闭文件夹。不同的级别是缩进的，就像标准的文件系统浏览器一样。

用 HTML 和 CSS 表示它的好方法是什么？请注意，我需要帮助的不是设计/外观本身，而是如何使用 HTML 以良好的方式构建它。我应该使用列表吗？

Answer 1

一种使用 div 和 span 构建的方法，下面最后用一个工作示例进行了解释。

每个文件夹包含两种类型的内容。 文件 和内部文件夹。所以一个基本的结构是用一个整体的容器来设计的。

整体容器:

<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 指定指定的文件夹是展开还是折叠。

如果文件夹不包含任何文件，则将 noitems span 元素添加到结构中。

当一个文件夹包含另一个文件夹时，只需将相同的 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 元素委托(delegate)给文件夹和文件，以处理单个事件监听器中的点击。单击文件夹时，它会展开并且图标会发生变化。再次点击它会折叠并重置图标。

当展开内部文件夹和折叠外部文件夹时，在展开外部文件夹时，内部文件夹的内容状态会按设计保留。

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>