文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >嵌套列表，其高度与元素数无关。

问嵌套列表，其高度与元素数无关。
EN

Stack Overflow用户
提问于 2021-03-27 16:18:21
回答 2查看 42关注 0票数 0

我有一个带有嵌套列表的下拉多色菜单，我需要所有三个列表(或列)都是相同的高度，即使它们有不同的项目数。列表是动态的--每个列表中的项目数可能有所不同。这是可能的还是我需要重写HTML代码？在这张图片中，你可以看到我想要达到的目标：

​

​

​

代码语言：javascript
复制
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");
  });
});
代码语言：javascript
复制
*,
*::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;
}
代码语言：javascript
复制
<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

javascript
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-03-27 16:31:32

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

代码语言：javascript
复制
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}`)
}
代码语言：javascript
复制
ul {
  height: calc(var(--items) * var(--item-height))
}
票数 0
EN

Stack Overflow用户

发布于 2021-03-27 16:26:37

向.dropdown ul添加固定高度，如下所示：

代码语言：javascript
复制
.dropdown ul {
  height: 110px;
}

​

代码语言：javascript
复制
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");
  });
});
代码语言：javascript
复制
*,
*::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;
}


/* NEW */

.dropdown ul {
  height: 110px;
}
代码语言：javascript
复制
<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>

​

在Codepen上检查它是否有效

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/66833501

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档