javascript - 使用 Javascript if else 在导航栏打开时触发 css 转换

Question

我有一个汉堡菜单按钮，当使用 css 和 javascript 单击时，它会转换为“X”。因为我的导航栏在做出选择时关闭，而不仅仅是在单击菜单按钮时关闭，所以菜单按钮保持为“X”。

我假设我需要使用“if else”语句来告诉菜单按钮更改而不是单击，但我不确定如何编写代码。

我已经包含了按钮样式的 css 代码以及当前用于使其转换的 javascript 和导航栏的 javascript。

按钮代码来自这个网站: http://callmenick.com/post/animating-css-only-hamburger-menu-icons

导航栏来自这里: https://www.w3schools.com/howto/howto_js_sidenav.asp

按钮 CSS 代码:

.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 96px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.c-hamburger:focus {
  outline: none;
}

.c-hamburger span {
  display: block;
  position: absolute;
  top: 44px;
  left: 18px;
  right: 18px;
  height: 8px;
  background: white;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #fff;
  content: "";
}

.c-hamburger span::before {
  top: -20px;
}

.c-hamburger span::after {
  bottom: -20px;
}

.c-hamburger {
  background-color: #ff3264;
}

.c-hamburger span {
  transition: background 0s 0.3s;
}

.c-hamburger span::before,
.c-hamburger span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger span::before {
  transition-property: top, transform;
}

.c-hamburger span::after {
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger.is-active {
  background-color: #cb0032;
}

.c-hamburger.is-active span {
  background: none;
}

.c-hamburger.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}

.c-hamburger.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.c-hamburger.is-active span::before,
.c-hamburger.is-active span::after {
  transition-delay: 0s, 0.3s;
}

按钮 Javascript:

(function() {

  "use strict";

  var toggles = document.querySelectorAll(".c-hamburger");

  for (var i = toggles.length - 1; i >= 0; i--) {
    var toggle = toggles[i];
    toggleHandler(toggle);
  };

  function toggleHandler(toggle) {
    toggle.addEventListener( "click", function(e) {
      e.preventDefault();
      (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
    });
  }

})();

导航栏 Javascript:

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() {
document.getElementById("mySidenav").style.width = "200px";
open = true;


}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
open = false;

}

如果有人可以帮助我找到正确的代码来执行此操作，或者有更好的主意，我将不胜感激。如果您还不知道的话，我对 Javascript 还很陌生。

谢谢!

Answer 1

我不太明白你在做什么。您的意思是您希望在单击按钮时关闭 NavBar 而不仅仅是在单击“X”时关闭吗？

如果是这样，在 HTML 代码中，您只需将 onclick="closeNav();" 添加到每个按钮即可。像这样

<button onclick = "closeNav();"> My Button </button>

---

好的。由于您希望按钮在 NavBar 打开时变为“X”，因此您需要为按钮提供一个 ID，那么我认为我们可以使用以下 Javascript 条件。

HTML

<button id="myButton" class="c-hamburger c-hamburger--htx">
    <span>
        ::before
        "toggle menu"
        ::after
    </span>
</button><!--I copied from the site you provided-->

Javascript我已经编辑了你的 sidenav.js

function decide(){
  if(open == true){
    closeNav();    
  }else{
    openNav();    
  }
}

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() {
  document.getElementById("mySidenav").style.width = "200px";
  document.getElementById("myButton").classList.add("is-active");
  open = true;
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("myButton").classList.remove("is-active");
  open = false;
}