Javascript Eventlistener在使用后需要刷新

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

但是，在关闭覆盖后，触发覆盖的按钮在单击它时没有响应。 但是，刷新页面后，它工作正常。为什么会这样

代码如下：

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

---

谢谢

实际上，您在关闭时将宽度设置为0%。此样式是一种内联样式，即使再次单击“打开”，它也将保持不变

---

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

您的单击事件仍然附加到按钮上，并且仍然有效，但是您调用的“打开”和“关闭覆盖”功能会改变样式

函数打开覆盖，将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%";

}

---

在closeNav函数上，为什么要将宽度设置为0%？而是切换类。已打开

element.classList.toggle("opened");

---

这将删除打开的类css。

这是因为

closeNav

函数正在将宽度设置为

0

。实际上，您不需要两个函数

openNav

和

closeNav

。您已经在使用

切换

。所以一个函数就足够了

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

---

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

最好使用：

display:none

并使用隐藏类。这将使您要隐藏的元素脱离页面流，并防止它在隐藏时干扰其他元素

.hide { display:none }

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

element.classList.toggle("hide");

---

内联样式会覆盖样式表中的规则，因此无论样式表规则怎么说，

width

都保持为零。@abhilash gopalakrishna on closeNav函数为什么要将宽度设置为0%？相反，toggle class

。opened

和tryI添加了打开的类，以尝试将转换应用于覆盖。我尝试删除width-

文档。getElementById（“myNav”）。style.width=“0%”

并在closeNav（）上切换打开的类。我还尝试了toggleDisplay（）功能。在这两种情况下，单击关闭图标无法关闭类。这里有一个到codepen-[.@Aravind S@niklaz@brk@Lars Olof Kreim谢谢：）@abhilash gopalakrishna

你在哪里

closeNav（）

函数？定义它类似于

toggleDisplay（）

…它将修复ISSUE。我添加了打开的类，因为我正在尝试添加覆盖内容显示方式的转换。我尝试在关闭时关闭该类，还尝试了函数toggleDisplay（）。

.hide { display:none }

element.classList.toggle("hide");