javascript - 使用 JavaScript 后不返回显示 block 的初始 css 设置

Question

我有一个导航菜单，当屏幕缩小到 767 像素以下时，导航栏会隐藏。然后，我使用 JavaScript 将导航栏设置为已阻止显示的 CSS 属性。问题是当用户单击汉堡菜单再次隐藏导航栏并将窗口调整到 767px 以上时，即使其原始 CSS 属性设置为显示 block ，导航栏也不会显示。

希望这是有道理的。

有什么建议吗？

var hamIcon = document.getElementById("hamburger-icon");

// open and close the navigation menu
hamIcon.onclick = function() {
  var navBar = document.getElementById("nav-bar");
  if (navBar.style.display === "block") {
    navBar.style.display = "none";
  } else {
    navBar.style.display = "block";
  }
};

#nav-bar {
  width: 75%;
  float: right;
  padding-right: 50px;
  display: block
}

#hamburger-icon {
  display: none;
  color: white;
  position: absolute;
  right: 20px;
  top: 20px;
}


/* START OF MEDIA QUERIES */

@media screen and (max-width: 767px) {
  #hamburger-icon {
    display: block;
  }
  #nav-bar {
    padding-right: 0px;
    margin-top: 50px;
    display: none;
  }
}

<section>
  <div id="top-bar-container">
    <i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
    <nav id="nav-bar">
    </nav>
  </div>
</section>

Answer 1

在第二次单击时隐藏导航时，不要将导航栏显式设置为 display: none，而是通过将其设置为空字符串来删除内联样式。您的 CSS 将处理其余部分。

(最好单击“展开代码段”以使此代码段正常工作)

var hamIcon = document.getElementById("hamburger-icon");

// open and close the navigation menu
hamIcon.onclick = function() {
  var navBar = document.getElementById("nav-bar");
  if (navBar.style.display === "block") {
    navBar.style.display = "";
  } else {
    navBar.style.display = "block";
  }
};

#nav-bar {
  width: 75%;
  float: right;
  padding-right: 50px;
  display: block
}

#hamburger-icon {
  display: none;
  /*color: white;*/
  position: absolute;
  right: 20px;
  top: 20px;
}


/* START OF MEDIA QUERIES */

@media screen and (max-width: 767px) {
  #hamburger-icon {
    display: block;
  }
  #nav-bar {
    padding-right: 0px;
    margin-top: 50px;
    display: none;
  }
}

<section>
  <div id="top-bar-container">
    <i id="hamburger-icon" class="fas fa-bars fa-2x">☰</i>
    <nav id="nav-bar">
    navigation
    </nav>
  </div>
</section>