CSS实现树形目录展示

前言

今天查看文档的时候看见Astro框架项目的展示，所以打算使用CSS来实现一个类似效果的目录展示

Astro结构图

details 和 summary

需要用到details 和 summary这两个标签 Details文档，这两个标签支持展开和收起，这里有一个简单的例子

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

Details

Something small enough to escape casual notice.

还可以支持多层嵌套，套娃details即可（前端套娃术🪆）如下（Astro项目结构）

---
---
<details>
    <summary>public/</summary>
    <p>robots.txt</p>
    <p>favicon.ico</p>
    <p>social.png</p>
</details>
<details>
    <summary>src/</summary>
    <details>
        <summary>components/</summary>
        <p>Header.astro</p>
        <p>Button.jsx</p>
    </details>
    <details>
        <summary>layouts/</summary>
        <p>PostLayout.astro</p>
    </details>
    <details>
        <summary>pages/</summary>
        <p>index.astro</p>
        <details>
            <summary>posts/</summary>
            <p>CSS教程.md</p>
            <p>Java教程.md</p>
            <p>Go教程.md</p>
        </details>
    </details>
    <details>
        <summary>styles/</summary>
        <p>global.css</p>
    </details>
</details>

---
---
<details>
    <summary>public/</summary>
    <p>robots.txt</p>
    <p>favicon.ico</p>
    <p>social.png</p>
</details>
<details>
    <summary>src/</summary>
    <details>
        <summary>components/</summary>
        <p>Header.astro</p>
        <p>Button.jsx</p>
    </details>
    <details>
        <summary>layouts/</summary>
        <p>PostLayout.astro</p>
    </details>
    <details>
        <summary>pages/</summary>
        <p>index.astro</p>
        <details>
            <summary>posts/</summary>
            <p>CSS教程.md</p>
            <p>Java教程.md</p>
            <p>Go教程.md</p>
        </details>
    </details>
    <details>
        <summary>styles/</summary>
        <p>global.css</p>
    </details>
</details>

public/

robots.txt

favicon.ico

social.png

src/

components/

Header.astro

Button.jsx

layouts/

PostLayout.astro

pages/

index.astro

posts/

CSS教程.md

Java教程.md

Go教程.md

styles/

global.css

没有缩进加个padding样式即可,这样在src目录下就可以看清效果

---
---
<details>
    <summary>public/</summary>
    <p>robots.txt</p>
    <p>favicon.ico</p>
    <p>social.png</p>
</details>
<details>
    <summary>src/</summary>
    <details>
        <summary>components/</summary>
        <p>Header.astro</p>
        <p>Button.jsx</p>
    </details>
    <details>
        <summary>layouts/</summary>
        <p>PostLayout.astro</p>
    </details>
    <details>
        <summary>pages/</summary>
        <p>index.astro</p>
        <details>
            <summary>posts/</summary>
            <p>CSS教程.md</p>
            <p>Java教程.md</p>
            <p>Go教程.md</p>
        </details>
    </details>
    <details>
        <summary>styles/</summary>
        <p>global.css</p>
    </details>
</details>
<style>
    details{
        padding-left:10px;
    }
</style>

public/

robots.txt

favicon.ico

social.png

src/

components/

Header.astro

Button.jsx

layouts/

PostLayout.astro

pages/

index.astro

posts/

CSS教程.md

Java教程.md

Go教程.md

styles/

global.css

绘制加号和减号

默认的黑色三角形太丑了，我们可以自己绘制加号和减号来代替三角形其实就是::marker伪元素生成的，只需要把::marker的list-style设置为none

summary{
    list-style:none;
}

iShot_2023-07-17_18.09.23

这样就去除了，看效果

---
---
<details>
    <summary>public/</summary>
    <p>robots.txt</p>
    <p>favicon.ico</p>
    <p>social.png</p>
</details>
<details>
    <summary>src/</summary>
    <details>
        <summary>components/</summary>
        <p>Header.astro</p>
        <p>Button.jsx</p>
    </details>
    <details>
        <summary>layouts/</summary>
        <p>PostLayout.astro</p>
    </details>
    <details>
        <summary>pages/</summary>
        <p>index.astro</p>
        <details>
            <summary>posts/</summary>
            <p>CSS教程.md</p>
            <p>Java教程.md</p>
            <p>Go教程.md</p>
        </details>
    </details>
    <details>
        <summary>styles/</summary>
        <p>global.css</p>
    </details>
</details>
<style>
    details{
        padding-left:10px;
    }
    summary{
        list-style:none;
    }
</style>

public/

robots.txt

favicon.ico

social.png

src/

components/

Header.astro

Button.jsx

layouts/

PostLayout.astro

pages/

index.astro

posts/

CSS教程.md

Java教程.md

Go教程.md

styles/

global.css

然后绘制加号➕ 和减号➖，这里我就不使用图标来代替了，直接用border边框

summary:before{
        content: '';
        display: inline-block;
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        border: 1px solid #999;
        background: linear-gradient(#999, #999) 50%/1px 10px no-repeat,linear-gradient(#999, #999)  50%/10px 1px no-repeat;
    }

看效果

---
---
<details>
    <summary>public/</summary>
    <p>robots.txt</p>
    <p>favicon.ico</p>
    <p>social.png</p>
</details>
<details>
    <summary>src/</summary>
    <details>
        <summary>components/</summary>
        <p>Header.astro</p>
        <p>Button.jsx</p>
    </details>
    <details>
        <summary>layouts/</summary>
        <p>PostLayout.astro</p>
    </details>
    <details>
        <summary>pages/</summary>
        <p>index.astro</p>
        <details>
            <summary>posts/</summary>
            <p>CSS教程.md</p>
            <p>Java教程.md</p>
            <p>Go教程.md</p>
        </details>
    </details>
    <details>
        <summary>styles/</summary>
        <p>global.css</p>
    </details>
</details>
<style>
    details{
        padding-left:10px;
    }
    summary{
        list-style: none;
        position: relative;
    }
    summary:before{
        content: '';
        display: inline-block;
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        border: 1px solid #999;
        background: linear-gradient(#999, #999) 50%/1px 10px no-repeat,linear-gradient(#999, #999)  50%/10px 1px no-repeat;
    }
</style>

public/

robots.txt

favicon.ico

social.png

src/

components/

Header.astro

Button.jsx

layouts/

PostLayout.astro

pages/

index.astro

posts/

CSS教程.md

Java教程.md

Go教程.md

styles/

global.css

为了区分折叠，还需要绘制减号➖ ，使open属性判断,下方是open的浏览器兼容性

open兼容性

---
---
<div>
    <details>
        <summary>public/</summary>
        <p>robots.txt</p>
        <p>favicon.ico</p>
        <p>social.png</p>
    </details>
    <details>
        <summary>src/</summary>
        <details>
            <summary>components/</summary>
            <p>Header.astro</p>
            <p>Button.jsx</p>
        </details>
        <details>
            <summary>layouts/</summary>
            <p>PostLayout.astro</p>
        </details>
        <details>
            <summary>pages/</summary>
            <p>index.astro</p>
            <details>
                <summary>posts/</summary>
                <p>CSS教程.md</p>
                <p>Java教程.md</p>
                <p>Go教程.md</p>
            </details>
        </details>
        <details>
            <summary>styles/</summary>
            <p>global.css</p>
        </details>
    </details>
</div>
<style>
    div{
        padding-left:10px;
    }
    details{
        padding-left:10px;
    }
    summary{
        list-style: none;
        position: relative;
    }
    summary:before{
        content: '';
        display: inline-block;
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        border: 1px solid #999;
        background: linear-gradient(#999, #999) 50%/1px 10px no-repeat,linear-gradient(#999, #999)  50%/10px 1px no-repeat;
    }
    details[open] > summary:before{
        background: linear-gradient(#999, #999) 50%/10px 1px no-repeat;
    }
</style>

public/

robots.txt

favicon.ico

social.png

src/

components/

Header.astro

Button.jsx

layouts/

PostLayout.astro

pages/

index.astro

posts/

CSS教程.md

Java教程.md

Go教程.md

styles/

global.css

绘制线条

summary{
    background: linear-gradient(#999,#999) 0px 50%/20px 1px no-repeat;
}
details{
    background: linear-gradient(#999, #999) 40px 0px/1px 100% no-repeat;
}

---
---
<div>
    <details>
        <summary>public/</summary>
        <p>robots.txt</p>
        <p>favicon.ico</p>
        <p>social.png</p>
    </details>
    <details>
        <summary>src/</summary>
        <details>
            <summary>components/</summary>
            <p>Header.astro</p>
            <p>Button.jsx</p>
        </details>
        <details>
            <summary>layouts/</summary>
            <p>PostLayout.astro</p>
        </details>
        <details>
            <summary>pages/</summary>
            <p>index.astro</p>
            <details>
                <summary>posts/</summary>
                <p>CSS教程.md</p>
                <p>Java教程.md</p>
                <p>Go教程.md</p>
            </details>
        </details>
        <details>
            <summary>styles/</summary>
            <p>global.css</p>
        </details>
    </details>
</div>
<style>
    div{
        padding-left:10px;
    }
    details{
        padding-left:40px;
    }
    summary{
        list-style: none;
        display: flex;
        align-items: center;
        height: 46px;
        font-size: 15px;
        line-height: 22px;
        color: rgba(0, 0, 0, 0.85);
        cursor: default;
        padding-left:30px;
    }
    summary:not(:only-child)::before{
        content: '';
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        margin-right: 8px;
        border: 1px solid #999;
        background: linear-gradient(#999, #999) 50%/1px 10px no-repeat,linear-gradient(#999, #999)  50%/10px 1px no-repeat;
    }
    details[open] > summary:before{
        background: linear-gradient(#999, #999) 50%/10px 1px no-repeat;
    }
    summary{
        background: linear-gradient(#999,#999) 0px 50%/20px 1px no-repeat;
    }
    details{
        background: linear-gradient(#999, #999) 40px 0px/1px 100% no-repeat;
    }
    p{
        padding-left:40px;
    }
</style>