Javascript код для расширения панели навигации не работает должным образом

Question

Я работаю над панелью навигации для моего веб-сайта, и я сделал несколько Javascript, чтобы соответствовать CSS. Перед запуском убедитесь, что окно результатов имеет ширину менее 760 пикселей.

function compressNavbar() {
  var x = document.getElementById("navbar");
  if (x.className === "responsive-h2") {
    x.className += " responsive-h2-expand";
  } else {
    x.className = "responsive-h2";
  }
}

ul.blue {
  background-color: DodgerBlue;
}

ul.blue * {
  color: white;
}


/* Horizontal navbar */

ul.horizontal-navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.horizontal-navbar li {
  float: left;
}

.horizontal-navbar li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* responsive */

@media screen and (max-width: 760px) {
  ul.responsive-h2 li {
    display: block;
  }
  ul.responsive-h2 li:not(:first-child):not(:last-child) {
    display: none;
    /* Remove all links except home and the menu button */
  }
  ul.responsive-h2-expand {
    position: relative;
  }
  .responsive-h2-expand li:last-child {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.responsive-h2-expand li {
    float: none !important;
    display: block !important;
  }
  ul.responsive-h2-expand li * {
    text-align: left !important;
  }
  ul.responsive-h2-expand li a {
    padding: 10px 14px;
    padding-left: 18px;
    padding-bottom: 11px;
  }
  ul.responsive-h2-expand li {
    list-style-type: none;
  }
}

<ul class="responsive-h2 horizontal-navbar blue" id="navbar">
  <li><a href="#">Home</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li>
    <a href="javascript:void(0)" onclick="compressNavbar()">
      Menu
    </a>
  </li>
</ul>

Начало работает отлично - у нас есть красивая, стилизованная навигационная панель, в которой отсутствуют все ссылки, кроме «Домой» и кнопки меню. Но когда я нажимаю кнопку меню, расширенная панель навигации не соответствует моему классу blue и не содержит всех моих ссылок. Кроме того, при повторном нажатии «Меню» большая часть моего стиля отсутствует.

Что не так с моим кодом, который делает это возможным? Поскольку я новичок в JS, я предполагаю, что это ... я думаю, что я могу делать что-то не так с className, но я не знаю, что или как это исправить.

Заранее спасибо.

Answer 1

Я думаю, вы не заменяете class должным образом

function compressNavbar() {
   var x = document.getElementById("navbar");
   if (x.className === "responsive-h2") {
       x.className += " responsive-h2-expand";
       // you are not adding "blue" and "horizontal-navbar" classes back
       // ex: x.className = "responsive-h2 responsive-h2-expand horizontal-navbar blue"
   } else {
       x.className = "responsive-h2";
   }
}

Вы можете использовать classList методы для манипулирования class эффективно

Answer 2

Я думаю, что лучше использовать classList.toggle:

function compressNavbar() {
  var x = document.getElementById("navbar");
  x.classList.toggle("responsive-h2-expand");
}