ichengzi · June 4, 2022 05:10
diff --git a/menu.css b/menu.css
 /* https://www.bilibili.com/video/BV1mA4y1Z7cy */
 /* https://m.php.cn/article/473454.html  画三角形文章 */

 details {
    position: relative;
    width: 300px;
    padding-left: 20px;
 }

 summary {
    list-style: none;
    padding: 10px;
 }

 summary:hover{
    background-color: aliceblue;
    cursor: pointer;
 }

 summary:not(:only-child):before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 15px;
    left: 20px;
    border: 6px solid #ccc;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
 }

 details[open] > summary:not(:only-child):before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 18px;
    left: 15px;
    border: 6px solid #ccc;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
 }
diff --git a/menu.html b/menu.html
 <!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>Menu Dmeo</title>
 </head>
 <body>
    <div id="menuBox"></div>
    <link href="./menu.css" rel="stylesheet"></style>
    <script src="./menu.js"></script>
 </body>
 </html>
diff --git a/menu.js b/menu.js
 // https://www.bilibili.com/video/BV1YT4y167TL

 const menuData = [
    {
        "name": "1",
        "children": [
            { "name": "1-1" },
            { "name": "1-2" },
            { "name": "1-3" },
        ]
    },
    {
        "name": "2",
        "children": [
            { "name": "2-1" },
            { "name": "2-2" },
            {
                "name": "3-3",
                "children": [
                    {
                        "name": "3-3-1"
                    }
                ]
            },
        ]
    }
 ]

 function createMenu(data, root) {
    if (data.length) {
        data.forEach(menu => {
            let detailsEle = document.createElement('details');
            let summaryEle = document.createElement('summary');
            summaryEle.innerText = menu.name;
            detailsEle.appendChild(summaryEle);
            root.appendChild(detailsEle);
            if (menu.children?.length) {
                createMenu(menu.children, detailsEle);
            }
        })
    }
 }

 const menu = document.getElementById('menuBox');
 createMenu(menuData, menu);