Question

我已经创建了水平菜单。现在我要是如果li的总宽度大于屏幕宽度，那么应该从最后开始不显示任何li。下面是我的代码不起作用。这段代码仅适用于最后一个版本，然后破坏了浏览器。我希望使用这种类型的代码来响应网页。我不知道这种类型的代码是否用于响应式。请帮忙。

var arr = document.querySelectorAll("nav>ul>li");
var availableWidth = document.querySelector("body").offsetWidth;
var liWidth = 0;
var i = 0;
for (i = 0; i < arr.length; i++) {
  liWidth = liWidth + arr[i].offsetWidth;
}
while (liWidth > availableWidth) {
  arr[arr.length - 1].style.display = "none";
  arr = document.querySelectorAll("nav>ul>li");
  liWidth = 0;
  i = 0;
  for (i = 0; i < arr.length; i++) {
    liWidth = liWidth + arr[i].offsetWidth;
  }

}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  display: flex;
}

ul li a {
  padding: 15px 25px;
  display: block;
  text-decoration: none;
  background-color: blue;
  color: white;
  border-right: 1px solid white;
}

ul li:last-child a {
  border: none;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content li a {
  color: white;
}

<nav id="testi">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Post</a></li>
    <li><a href="#">Books</a></li>
    <li><a href="#">Poems</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li class="dropdown"><a href="#" class="dropdown-btn">About</a>
      <ul class="dropdown-content">
        <li><a href="#">Drop</a></li>
        <li><a href="#">Drop</a></li>
        <li><a href="#">Drop</a></li>
        <li><a href="#">Drop</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

似乎是您遇到的问题：
arr[arr.length - 1].style.display = "none";

您的隐藏元素仍在此数组中。因此，您的代码只需在最后一个元素上保持不显示任何内容。最简单的解决方法是保留下一个需要隐藏的元素的索引。

这就是说，即使您坚持要使用Javascript而不是CSS来做，这也简直是小菜一碟。无需在每个循环上重新运行querySelectorAll。此外，您只需一个循环即可完成此操作。

for (var i = 0; i < arr.length; i++) {
    liWidth += arr[i].offsetWidth;
    if (liWidth > availableWidth) {
        arr[i].style.display = "none";
    }
}

JavaScript while循环无法与for循环一起使用

1 个答案: