个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 12:07:26 25 4
gpt4 key购买 nike

目前，我的汉堡包按钮在转换之前工作得很好，但是在汉堡包按钮转换为红色“X”按钮后，如果您单击“X”的任何部分，按钮将转换，但不会关闭菜单应该如此。我找不到我搞砸的地方。

这是 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>

最佳答案

您的基本问题是每次点击时您都会添加一个 eventListener，因此您正在创建一个事件 hell 。删除 onClick 并仅添加一次事件监听器以运行您的方法。您对切换面板的检查也是错误的。按钮内有一个跨度，它也应该切换。

关于javascript - 如何让我的按钮在任何地方点击它的地方工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34780501/

25 4 0
文章推荐： javascript - 在静态方法中访问构造函数 var (es6)
文章推荐： java - 在处理大数据时如何确保您的代码按预期工作？
文章推荐： java - 我们能得到 TestNG 报告显示测试类是通过还是失败吗
文章推荐： java - TestNg 数据绑定(bind) : setting the location of properties on test start up
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com