时间戳

首页 > 解决方案 > 嵌套列表高度相等，与元素数量无关

javascript - 嵌套列表高度相等，与元素数量无关

问题描述

我有一个带有嵌套列表的下拉多列菜单，我需要所有三个列表（或列）的高度相同，即使它们的项目数量不同。列表是动态的 - 每个列表中的项目数量可能会有所不同。有可能还是我需要重写 HTML 代码？在图像中，您可以看到我想要实现的目标：

1

const firstlevel = document.querySelectorAll(".first-level > li");
const secondlevel = document.querySelectorAll(".second-level > li");

const menuButton = document.querySelector(".menu-button")

menuButton.addEventListener("click", (e) => {
  menuButton.classList.add('active');
});

firstlevel.forEach((item) => {
  item.addEventListener("click", (e) => {
    firstlevel.forEach((elem) => {
      elem.classList.remove("active");
    });

    item.classList.add("active");

    item.querySelector('ul > li').classList.add("active");

  });
});

secondlevel.forEach((item) => {
  item.addEventListener("click", (e) => {

    secondlevel.forEach((elem) => {
      elem.classList.remove("active");
    });
    item.classList.add("active");
  });
});
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 10px;
}

.dropdown {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100px;
  background-color: #0abf53;
}

.dropdown li {}

.dropdown li a {
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 10px;
}

.dropdown li ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
  line-height: normal;
  background-color: #333;
}

.dropdown li ul li a {
  text-align: left;
  color: #cccccc;
  font-size: 14px;
  padding: 10px;
  display: block;
  white-space: nowrap;
}

.dropdown li ul li a:hover {
  background-color: #0abf53;
  color: #ffffff;
}

.dropdown li ul li ul {
  left: 100%;
  top: 0;
}

ul li:hover>a {
  background-color: #0abf53;
  color: #ffffff !important;
}

ul li.active>ul {
  display: block;
}
<ul class="dropdown">
  <li class="menu-button"><a href="#">Menu</a>
    <ul class="first-level">
      <li class="active"><a href="#">1</a>
        <ul class="second-level">
          <li class="active"><a href="#">1-1</a>
            <ul>
              <li><a href="">1-1-1</a></li>
              <li><a href="">1-1-2</a></li>
              <li><a href="">1-1-3</a></li>
            </ul>

          </li>
          <li><a href="#">1-2</a>
            <ul>
              <li><a href="">1-2-1</a></li>
              <li><a href="">1-2-2</a></li>
              <li><a href="">1-2-3</a></li>
            </ul>
          </li>
          <li><a href="#">1-3</a>
            <ul>
              <li><a href="">1-3-1</a></li>
              <li><a href="">1-3-2</a></li>
              <li><a href="">1-3-3</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">2</a>
        <ul class="second-level">
          <li><a href="#">2-1</a>
            <ul>
              <li><a href="">2-1-3</a></li>
              <li><a href="">2-1-3</a></li>
              <li><a href="">2-1-3</a></li>
            </ul>
          </li>
          <li><a href="#">2-2</a>
            <ul>
              <li><a href="">2-2-3</a></li>
              <li><a href="">2-2-3</a></li>
              <li><a href="">2-2-3</a></li>
            </ul>
          </li>
          <li><a href="#">2-3</a>
            <ul>
              <li><a href="">2-3-1</a></li>
              <li><a href="">2-3-2</a></li>
              <li><a href="">2-3-3</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

这是我到目前为止的尝试： https ://codepen.io/Agrimensor/pen/vYgGJwr

标签： javascripthtmlcss

解决方案

我认为最简单的方法是将变量从 JS 传递到 CSS 并在那里计算高度。

const listLength = () => {
  let container = document.querySelector('.dropdown');
  let items = 0;
  let lists = container.querySelectorAll(".class-name-to-select-ul")
  list.forEach(x => {
    let liCount = x.querySelectorAll("li").lenght;
    items = items > liCount ? items : liCount;
  });
  container.setAttribute('style', `--items:${items}`)
}

ul {
  height: calc(var(--items) * var(--item-height))
}

推荐阅读