带有对象数组的可扩展动态嵌套列表

Posted 2021-05-07

我热衷于可扩展嵌套数组列表的任何热衷于帮助我的人

https://jsfiddle.net/AccordEuro06/2otnxb9c/3/

const webfolder = [{
    name: 'Webpage',
    type: 'folder',
    children: [{
            name: 'php',
            type: 'folder',
            children: [{
                    name: 'header.php',
                    type: 'file'
                },
                {
                    name: 'footer.php',
                    type: 'file'
                },
            ]
        },
        {
            name: 'css',
            type: 'folder',
            children: [{
                    name: 'images',
                    type: 'folder',
                    children: [{
                            name: 'logos',
                            type: 'folder',
                            children: [{
                                    name: 'Colored.svg',
                                    type: 'file'
                                },
                                {
                                    name: 'Monochrome.svg',
                                    type: 'file'
                                },
                            ]
                        },
                        {
                            name: 'gallery',
                            type: 'folder',
                            children: [{
                                    name: 'image1.jpg',
                                    type: 'file'
                                },
                                {
                                    name: 'image2.png',
                                    type: 'file'
                                },
                                {
                                    name: 'image3.gif',
                                    type: 'file'
                                },
                                {
                                    name: 'image4.jpeg',
                                    type: 'file'
                                },
                                {
                                    name: 'image5.jpg',
                                    type: 'file'
                                },
                            ]
                        },
                        {
                            name: 'about-us.jpg',
                            type: 'file'
                        },
                    ],
                },
                {
                    name: 'style.css',
                    type: 'file'
                },
            ]
        },
        {
            name: 'javascipt',
            type: 'folder',
            children: [{
                    name: 'script.js',
                    type: 'file'
                },
                {
                    name: 'script2.js',
                    type: 'file'
                },
                {
                    name: 'ajax.js',
                    type: 'file'
                },
                {
                    name: 'jquery.js',
                    type: 'file'
                },
            ]
        },
        {
            name: 'index.html',
            type: 'file'
        }
    ]
}];

function listHtml(children) {
    return '<ul>' + children.map(node =>
            '<li>' + node.name +
            (node.type === 'file' ? '' : listHtml(node.children)) +
            '</li>').join('
') +
        '</ul>';
}


document.getElementById('expandableTree').innerHTML += listHtml(webfolder);

我了解点击隐藏/显示应该使用css完成，但是我没有办法为分支和叶子添加适当的类了

答案

您可以使用HTML5 <details>元素：

<details>

尝试function listHtml(children) { return '<ul>' + children.map(node => `<li> ${node.type === 'file' ? node.name : `<details> <summary>${node.name}</summary> ${listHtml(node.children)} </details>`} </li>` ).join(' ') + '</ul>'; } document.getElementById('expandableTree').innerHTML += listHtml(webfolder);