原生js折疊菜單欄

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #menu {
        background-color: #f5f5f5;
      }
      .sub-menu,
      .menu-item {
        line-height: 30px;
        text-indent: 10px;
      }
      .sub-menu {
        padding-top: 30px;
        position: relative;
        transition: all 0.3s;
        padding-left: 15px;
        overflow-y: hidden;
      }
      .menu-item:hover {
        background-color: gainsboro;
      }
      .sub-title {
        background-color: #000;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }
      .sub-title:after {
        content: '>';
        transition: all 0.3s;
        transform-origin: center;
        position: absolute;
        right: 10px;
        margin-left: 15px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        transform: rotate(90deg);
      }
      .sub-title-arrow-down:after {
        transform: rotate(90deg);
      }
      .sub-title-arrow-right:after {
        transform: rotate(0);
      }
    </style>
  </head>
  <body>
    <div id="menu"></div>
    <script>
      const arr = [{
        "name": "前端",
        "url": "/src/dist/docs/前端",
        "child": [{
          "name": "html",
          "url": "/src/dist/docs/前端/html.html",
          "child": []
        }]
      }, {
        "name": "后端",
        "url": "/src/dist/docs/后端",
        "child": [{
          "name": "nodejs",
          "url": "/src/dist/docs/后端/nodejs.html",
          "child": []
        }]
      }, {
        "name": "文檔",
        "url": "/src/dist/docs/文檔",
        "child": [{
          "name": "doc",
          "url": "/src/dist/docs/文檔/doc.html",
          "child": []
        }, {
          "name": "文檔",
          "url": "/src/dist/docs/文檔/文檔.html",
          "child": [{
            "name": "文檔1",
            "url": "/src/dist/docs/文檔/文檔.html",
            child: []
          }, {
            "name": "文檔2",
            "url": "/src/dist/docs/文檔/文檔.html",
            child: [{
                "name": "文檔3",
                "url": "/src/dist/docs/文檔/文檔.html",
                child: []
              },
              {
                "name": "文檔4",
                "url": "/src/dist/docs/文檔/文檔.html",
                child: []
              },
              {
                "name": "文檔5",
                "url": "/src/dist/docs/文檔/文檔.html",
                child: []
              },
            ]
          }, ]
        }]
      }]

      function renderMenu(arr) {
        function renderMenuItem(data) {
          let html = ''
          data.forEach(item => {
            if (!!item.child.length) {
              html +=
                `<div class="sub-menu"><div class="sub-title">${item.name}</div>${renderMenuItem(item.child)}</div>`
            } else {
              html += `<div class="menu-item">${item.name}</div>`
            }
          })
          return html
        }
        const html = renderMenuItem(arr)
        const menu = document.querySelector('#menu')
        menu.innerHTML = html
        const subMenus = document.querySelectorAll('.sub-menu')
        subMenus.forEach(item => {
          const children = item.querySelectorAll('.menu-item, .sub-title')
          item.style.height = (children.length - 1) * 30 + 'px';
          const subTitle = item.querySelectorAll('.sub-title')
          subTitle.forEach(v => {
            v.onclick = function() {
              const height = (children.length - 1) * 30 + 'px';
              const isFold = parseInt(item.style.height) == 0
              v.className = isFold ? 'sub-title sub-title-arrow-down' : 'sub-title sub-title-arrow-right'
              item.style.height = isFold ? height : 0
            }
          })
        })
      }
      renderMenu(arr)
    </script>
  </body>
</html>
最后編輯于：2020.06.24 14:08:02
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者