菜单打开关闭

最新推荐文章于 2024-09-30 20:20:23 发布

不道归来`

最新推荐文章于 2024-09-30 20:20:23 发布

阅读量216

点赞数 1

文章标签： elementui webview css

本文链接：https://blog.csdn.net/qq_46342447/article/details/122104098

版权

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .city ul {
            max-height: 0px;
            transition: all 0.4s;
            overflow: hidden;
        }

        .city ul[open] {
            max-height: 1000px;
        }
    </style>
    </style>
</head>

<body>
    <ul class="city">
        <li>北京
            <ul>
                <li>海淀</li>
                <li>朝阳</li>
                <li>昌平
                    <ul>
                        <li>小汤山</li>
                        <li>沙河</li>
                        <li>回龙观</li>
                        <li>天通苑</li>
                        <li>霍营</li>
                        <li>阳坊</li>
                    </ul>
                </li>
                <li>大兴</li>
                <li>密云</li>
                <li>顺义</li>
            </ul>
        </li>
        <li>河北</li>
        <li>山西</li>
        <li>陕西
            <ul>
                <li>西安</li>
                <li>咸阳
                    <ul>
                        <li>三原</li>
                        <li>礼泉</li>
                        <li>淳华</li>
                        <li>富平</li>
                        <li>泾阳</li>
                    </ul>
                </li>
                <li>宝鸡</li>
                <li>铜川</li>
                <li>榆林</li>
            </ul>
        </li>
        <li>河南</li>
        <li>山东</li>
    </ul>

    <script>



        var city = document.querySelector(".city");

        city.addEventListener("click", clickhandler);

        function clickhandler(e) {
            if (e.target.nodeName !== "LI") return;
            var ul = e.target.firstElementChild;
            if (!ul) return;
            if (ul.getAttribute("open") !== "true") {
                ul.setAttribute("open", "true");
            } else {
                ul.removeAttribute("open");
            }
        }
    </script>
</body>

</html>