Javascript事件监听器使用后需要刷新

Question

我正在学习JavaScript。我尝试实现一个简单的叠加层，它在单击按钮时转换并在单击关闭按钮后关闭。

但是，关闭叠加层后，触发叠加层的按钮在单击时没有响应。但是刷新后它工作正常 page.Why 是这样吗？

代码如下：

 <a href="#" class="fadeInRight wow btn btn-border btn-lg "  onclick="openNav()" data-wow-delay=".6s">Explore More</a>

这是具有 openNav() 功能的按钮

<div id="myNav" class="overlayed">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 <div>overlay content</div>
 </div>
 <script type="text/jscript">
    function openNav() {

   var element = document.getElementById("myNav");
   element.classList.toggle("opened");
   }


  function closeNav() {
  document.getElementById("myNav").style.width = "0%";


  }
 </script>

打开的是 class，内容 css

    .opened
   {
     width: 100%;
     height:100%;
     transition: width 6s, height 4s;
     opacity: 1;
   }

谢谢

Answer 1

实际上你在关闭时将宽度设置为 0%。此样式为内联样式，再次点击打开仍会保留。

您应该删除您在打开时添加的 "opened" class。

Answer 2

您的点击事件仍然附加到您的按钮，它仍然有效，但您调用的打开和关闭叠加层的函数改变了样式。

打开叠加层的函数，将 css class 附加到 myNav。

关闭叠加层的函数将 myNav 宽度设置为 0%。

function openNav() {

    var element = document.getElementById("myNav");
    element.classList.toggle("opened");
    element.style.width = "100%"; // or whatever width you need

}


function closeNav() {
    var element = document.getElementById("myNav");
    element.classList.toggle("opened"); //to remove the class, or use .remove explicitly
    element.style.width = "0%";

}

但实际上，您不需要更改元素的宽度，如果您添加或删除 opened class，就足够了。

function openNav() {

    var element = document.getElementById("myNav");
    element.classList.toggle("opened");
  //  element.style.width = "100%"; // or whatever width you need

}


function closeNav() {
    var element = document.getElementById("myNav");
    element.classList.toggle("opened"); //to remove the class, or use .remove explicitly
   // element.style.width = "0%";

}

Answer 3

在 closeNav 功能上为什么要设置宽度 0%？而是切换 class .opened

element.classList.toggle("opened");

这将删除打开的 class css.

Answer 4

那是因为 closeNav 函数将宽度设置为 0。事实上你不需要两个函数 openNav 和 closeNav。您已经在使用 toggle。所以一个功能就够了

function toggleDisplay() {
    var element = document.getElementById("myNav");
    element.classList.toggle("opened");
   }

Answer 5

除了根据问题显示当您想要重新打开元素时如何重置宽度的答案。

最好使用：display: none 并使用隐藏 class。这会将您要隐藏的元素从页面流中移除并阻止它在隐藏时干扰其他元素。

.hide { display:none }

然后 add/remove 从你想要 hide/show 的元素中 class 像这样：

element.classList.toggle("hide");

Javascript事件监听器使用后需要刷新

Javascript Eventlistener needs refresh after being used

javascript

dom

web-frontend