纯css折叠列表（子父两级）

最新推荐文章于 2024-11-12 22:56:44 发布

逃跑的羊

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量230

点赞数 1

分类专栏： css学习文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_55766628/article/details/142813497

版权

css学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美观的纯 CSS 折叠列表</title>
    <style>
        .cy-ul {
            list-style-type: none;
            padding: 0;
        }

        .cy-li {
            margin: 5px 0;
            position: relative;
            padding-left: 25px;
        }

        .cy-checkbox[type="checkbox"] {
            display: none;
        }

        .label {
            cursor: pointer;
            position: relative;
            padding-left: 15px;
        }

        /* 箭头样式 */
        .label:before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%) rotate(-45deg);
            width: 4px;
            height: 4px;
            border: solid black;
            border-width: 0 2px 2px 0;
            display: inline-block;
            transition: transform 0.2s;
        }

        /* 隐藏子级 */
        .children {
            display: none;
        }

        /* 当父项被选中时显示子级 */
        .cy-checkbox[type="checkbox"]:checked~.children {
            display: block;
        }

        /* 父项没有子级时，隐藏箭头 */
        .cy-li>.cy-ul.children:empty+label:before {
            display: none;
            /* 子级为空时不显示箭头 */
        }

        /* 当父项被选中时旋转箭头 */
        .cy-checkbox[type="checkbox"]:checked+label:before {
            transform: translateY(-50%) rotate(45deg);
        }
    </style>
</head>

<body>

    <h1>美观的纯 CSS 折叠列表</h1>

    <ul class="cy-ul">
        <li class="cy-li">
            <input class="cy-checkbox" type="checkbox" id="parent1">
            <label class="label" for="parent1">父级 1</label>
            <ul class="children cy-ul">
                <li class="cy-li">
                    子级 1-1
                </li>
            </ul>
        </li>

    </ul>

</body>

</html>