纯css实现一个级联连线效果(2)-阿里云开发者社区

纯css实现一个级联连线效果(2)

2023-07-05 158

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 于是基本上我们的多层级效果就实现了，全部代码如下

  /* 兜底 ul的伪元素是 第一层元素的高度 */
    .ul {
      position: relative;
    }
    .ul::after {
      content: "";
      position: absolute;
      width: 1px;
      height: calc(100% - 10px);
      background: #000;
      top: 50%;
      left: -9px;
      top: 0;
    }

 <script>
    const container = document.querySelector(".ul");
    // 获取第一层级最后一个元素的offsetTop
    const lastChildOffsetTop = container.lastElementChild.offsetTop;
    container.style.height = lastChildOffsetTop + 10 + "px";
  </script>

<!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>
  </head>
  <style>
    .box {
      position: relative;
      left: 20%;
      top: 100px;
    }
    .box div {
      position: relative;
    }
    .box .child {
      margin-left: 30px;
    }
    .box div.child::before {
      content: "";
      position: absolute;
      width: 1px;
      height: 22px;
      background: #000;
      top: 50%;
      left: -39px;
      top: -9px;
    }
    .box div.child::after {
      content: "";
      position: absolute;
      width: 24px;
      height: 1px;
      background: #000;
      top: 50%;
      transform: translateY(-50%);
      left: -39px;
      top: 12px;
    }
    .box > div.child > div {
      margin-left: 30px;
    }
    .box .two_child {
      margin-left: 10px;
      position: relative;
    }
    .box2 {
      position: relative;
      left: 50%;
    }
    /* 兜底 ul的伪元素是 第一层元素的高度 */
    .ul {
      position: relative;
    }
    .ul::after {
      content: "";
      position: absolute;
      width: 1px;
      height: calc(100% - 10px);
      background: #000;
      top: 50%;
      left: -9px;
      top: 0;
    }
    .two_child {
      position: absolute;
    }
  </style>
  <body>
    <div class="box">
      <div class="ul">
        <div class="parent">四川区域</div>
        <div class="child">四川一区</div>
        <div class="child">四川二区</div>
        <div class="child">
          四川三区
          <div class="child two_child">
            四川三区(一)
            <div class="child two_child">四川三区(一) --- 1</div>
          </div>
        </div>
        <div class="child">四川三区</div>
        <div class="child">
          四川四区
          <div class="child two_child">
            四川四区(一) --- 1
            <div class="child two_child">四川四区(一) --- 1 - 1</div>
          </div>
        </div>
        <!-- <div class="child">四川四区</div> -->
      </div>
    </div>
    <div class="box box2">
      <div class="ul">
        <div class="parent">四川区域</div>
        <div class="child">四川一区</div>
        <div class="child">四川二区</div>
        <div class="child">
          四川三区
          <div class="child two_child">
            四川三区(一)
            <div class="child two_child">四川三区(一) --- 1</div>
          </div>
        </div>
        <div class="child">四川三区</div>
        <div class="child">
          四川四区
          <div class="child two_child">
            四川四区(一) --- 1
            <div class="child two_child">四川四区(一) --- 1 - 1</div>
          </div>
        </div>
        <div class="child">四川四区</div>
      </div>
    </div>
  </body>
  <script>
    const container = document.querySelector(".ul");
    // 获取第一层级最后一个元素的offsetTop
    const lastChildOffsetTop = container.lastElementChild.offsetTop;
    container.style.height = lastChildOffsetTop + 10 + "px";
  </script>
</html>

遗留缺点，上述的兜底方案其实只考虑了第一层，类似的如果下面层级也想完成最适配的情况，也要通过上述方案进行兜底设置。

文章标签：

前端开发

关键词：

CSS连线

纯css实现一个级联连线效果(2)

热门文章

最新文章

相关课程

相关电子书

相关实验场景