Javascript Eventlistener 使用后需要刷新答案

【问题标题】：Javascript Eventlistener needs refresh after being usedJavascript Eventlistener 使用后需要刷新
【发布时间】：2018-12-06 04:01:08
【问题描述】：

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

但是，在关闭叠加层后，触发叠加层的按钮在单击时没有响应。但是刷新页面后就可以正常使用了，这是为什么呢？

代码如下：

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

打开的是一个有css内容的类

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

谢谢

【问题讨论】：

内联样式覆盖样式表中的规则，因此width 保持为零，无论样式表规则说什么。
@abhilash gopalakrishna on closeNav 功能为什么要设置宽度 0% ？而是切换类.opened 并尝试
我添加了打开的类以尝试将转换应用于覆盖。我尝试删除宽度-document.getElementById("myNav").style.width = "0%"; 并在 closeNav() 上切换打开的类。我还尝试了 toggleDisplay() 功能。在这两种情况下 - 单击关闭图标无法关闭课程。这里是 codepen 的链接 - [codepen.io/itsmeabhilashgk/pen/qKJPVx?editors=1100]。 @Aravind S @niklaz @brk @Lars-Olof Kreim 谢谢：）
@abhilash gopalakrishna <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 你在哪里 closeNav() 函数？将其定义为类似于toggleDisplay()...它将解决问题。

标签： javascript dom web-frontend

【解决方案1】：

实际上，您在关闭时将宽度设置为 0%。此样式是内联样式，即使您再次单击打开也会保留。

您应该删除您在打开时添加的“已打开”类。

【讨论】：

【解决方案2】：

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

打开叠加层的函数，将 css 类附加到 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 类就足够了。

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%";

}

【讨论】：

【解决方案3】：

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

element.classList.toggle("opened");

这将删除打开的类 css。

【讨论】：

【解决方案4】：

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

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

【讨论】：

我已经添加了打开的类，因为我正在尝试添加对覆盖内容显示方式的转换。我尝试了在关闭时关闭类，也尝试了函数 toggleDisplay()。

【解决方案5】：

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

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

.hide { display:none }

然后从要隐藏/显示的元素中添加/删除该类，如下所示：

element.classList.toggle("hide");

【讨论】：