Question

目前我的汉堡包按钮在转换之前工作得很好，但是在汉堡包按钮转换为红色＆＃34; X＆＃34;按钮，如果你点击＆＃34; X＆＃34;的任何部分按钮将变换，但它不会像它应该关闭菜单。我无法找到我搞砸的地方。

这是jsfiddle：https://jsfiddle.net/ex3z5o8L/

以下是代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">

    *{
        margin: 0px;
        padding: 0px;
        font-family: "Verdana";
    }
    #image {
        position: relative;
        z-index: -1 ;       
        height: 100vh;
        width: 100%;
    }
    #content {
        position: relative;
        height: 100vh;
        width: 100%;
        background-color:#4d5555;
    }
    #footer {
        position: relative;
        width: 100%;
        height: 100vh;
        background-color:#ffffff;
    }
    div#header #fullScreenNav{
        position:fixed;
        height:0px;
        width:100%;
        background:#000;
        top:0px;
        left:0px;
        overflow:hidden;
        z-index:2;
    }
    #fullScreenNavbtn{
        background: #f3f3f3;
        padding: 10px;
        position: absolute;
        z-index: 1  ;   
        top: 70vh;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }
/* ---------------------------------------------------------Start Of Hamburger Button------------------------------------------------------- */
.c-hamburger {
  display: block;
  position: fixed;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 64px;
  height: 64px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.1s;
  border-radius:10px;    
  background: transparent;
  right:5px;
  top:5px;
  z-index: 3;
}
.c-hamburger:focus {
  outline: none;
}

.c-hamburger:hover span,
.c-hamburger:hover span::before,
.c-hamburger:hover span::after
{background: black;}

.c-hamburger span {
  display: block;
  position: absolute;
  top: 28px;
  left: 10px;
  right: 10px;
  height: 8px;
  background: #e6e6e6;
  border-radius:100px;
}

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

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

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

.c-hamburger--htx {
}

.c-hamburger--htx span {
}

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

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

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

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

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

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

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

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.1s;
}
/* ---------------------------------------------------------End of Hamburger Button-------------------------------------------------- */
</style>

</head>

<body>


<div id="header">
    <div id="headerBtnHolder">
    <img onload="parallex1('image')" src="" id="image" />
        <button id="fullScreenNavbt" class="c-hamburger c-hamburger--htx" onclick="toggleNavPanel('fullScreenNav','100vh','fullScreenNavbt')">
            <span>toggle menu</span>
        </button>
    </div>
    <div id="fullScreenNav">
        <div> 
        </div>
    </div>
</div>

<div id="content"></div>

<div id="footer"></div>

<script>
(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");
    });
  }

})();
</script>
<script>
function toggleNavPanel(dropDivId, height, btnId){
    var panel = document.getElementById(dropDivId), maxH= height, nav = btnId;
  if(panel.style.height == maxH){
      panel.style.height = "0px";
    } else {
        panel.style.height = maxH;
    }
window.addEventListener('mouseup', function(event){
        if(event.target != panel && event.target.parentNode !=panel && event.target.id != nav ){
             panel.style.height = "0px"; 
        }
});
}
</script>
<script type="text/javascript">
    function parallex1(ObjectId){
    var ypos, image;
    function parallex () {
        ypos = window.pageYOffset;
        image = document.getElementById(ObjectId);
        image.style.top = ypos * .6 + 'px';
    }
    window.addEventListener('scroll', parallex);}
</script>
</body>
</html>

Answer 1

您的基本问题是每次点击都会添加一个eventListener，因此您需要重新创建一个地狱事件。删除onClick并仅添加一次事件侦听器以运行方法。您对切换面板的检查也是错误的。按钮内还有一个跨度，也可以切换。

如何让我的按钮在任何地方被点击的地方工作？

1 个答案: