Цикл JavaScript не работает с циклом for - PullRequest
Новая
       10

Цикл JavaScript не работает с циклом for

0 голосов
/ 26 августа 2018

Я создал горизонтальное меню.Теперь я хочу, если общая ширина 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>

1 Ответ

0 голосов
/ 26 августа 2018

Проблема, кажется, ваша линия:
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";
    }
}
...