一个简单的折叠菜单

最新推荐文章于 2021-12-08 09:34:04 发布

52小HH

最新推荐文章于 2021-12-08 09:34:04 发布

阅读量107

点赞数

分类专栏： js 文章标签： css3 css javascript

本文链接：https://blog.csdn.net/weixin_40613615/article/details/121159555

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

先上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
      html,body {
          height: 100%;
          width: 100%;
      }
      .menu-wrapper {
          width: 200px;
       }
      .bg-img {
          position: relative;
      }
      .bg-img::before {
          content: '';
          width: 20px;
          height: 20px;
          background: url("zhankai_.png") no-repeat right;
          background-size: 20px 20px;
          position: absolute;
          right: 10px;
          top: 10px;
          transform: rotate(0deg);
          transition: all 0.3s;
      }
      .e-bg-img::before {
          transform: rotate(90deg);
      }
      .menu-title {
          height: 40px;
          width: 200px;
          border-bottom: 1px solid #111111;
          text-align: center;
          line-height: 40px;
      }
      .menu-next {
          height: 0;
          max-height: 0px;
          overflow: hidden;
          transition: all 2s;
      }
      .menu-open {
          height: auto;
          max-height: 1000px;
      }
  </style>
</head>
<body>
  <div class="menu-wrapper">
    <div class="menu">
      <div class="menu-title bg-img" data-level="1">1</div>
      <div class="menu-next">
        <div class="menu">
          <div class="menu-title" data-level="2">11</div>
          <div class="menu-next"></div>
        </div>
        <div class="menu">
          <div class="menu-title" data-level="2">12</div>
          <div class="menu-next"></div>
        </div>
      </div>
    </div>
    <div class="menu">
      <div class="menu-title bg-img" data-level="1">2</div>
      <div class="menu-next">
        <div class="menu">
          <div class="menu-title" data-level="2">21</div>
          <div class="menu-next"></div>
        </div>
        <div class="menu">
          <div class="menu-title" data-level="2">22</div>
          <div class="menu-next"></div>
        </div>
      </div>
      <div class="menu">
        <div class="menu-title bg-img" data-level="1">3</div>
        <div class="menu-next">
          <div class="menu">
            <div class="menu-title bg-img" data-level="2">31</div>
            <div class="menu-next">
              <div class="menu">
                <div class="menu-title bg-img" data-level="3">311</div>
                <div class="menu-next">
                  <div class="menu">
                    <div class="menu-title" data-level="4">3111</div>
                    <div class="menu-next"></div>
                  </div>
                  <div class="menu">
                    <div class="menu-title" data-level="4">3112</div>
                    <div class="menu-next"></div>
                  </div>
                </div>
              </div>
              <div class="menu">
                <div class="menu-title bg-img" data-level="3">312</div>
                <div class="menu-next">
                  <div class="menu">
                    <div class="menu-title" data-level="4">3121</div>
                    <div class="menu-next"></div>
                  </div>
                  <div class="menu">
                    <div class="menu-title" data-level="4">3122</div>
                    <div class="menu-next"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="menu">
            <div class="menu-title" data-level="2">32</div>
            <div class="menu-next"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  window.onload = function() {
    expand()
  }
  function expand() {
    var eles = document.getElementsByClassName('menu-title')
    for (var i = 0; i < eles.length; i ++) {
      eles[i].onclick = function() {
        for (var j = 0; j < eles.length; j ++) {
          if (eles[j].dataset.level >= this.dataset.level) {
            eles[j].nextElementSibling.classList.remove('menu-open')
            eles[j].classList.remove('e-bg-img')
          }
        }
        this.nextElementSibling.classList.add('menu-open')
        this.classList.add('e-bg-img')
      }
    }
  }
  window.onclick = function(e) {
    var ele = e.target
    var eles = document.getElementsByClassName('menu-title')
    if (!ele.classList.contains('menu-title')) {
      for (var i = 0; i < eles.length; i ++) {
        eles[i].nextElementSibling.classList.remove('menu-open')
        eles[i].classList.remove('e-bg-img')
      }
    }
  }
</script>
</html>

这里html需要保持的结构是

 <div class="menu">
  <div class="menu-title" data-level="2">22</div>
   <div class="menu-next"></div>
 </div>

按照需要的层级往menu-next这一层嵌套相同结构即可，需要什么样式自己去添加
data-level用来判断属于第几层

实现效果：同一层只能展开一个。在这里插入图片描述

52小HH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的折叠菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html,body {
复制链接

扫一扫