为什么我必须重新加载页面才能让我的 JS 事件工作？

debugcn 发表于 Dev

安吉拉·英尼斯

您好，我为我的主页创建了一个点击导航栏。我希望用户点击然后导航栏打开。我的代码确实可以工作，但是它只能工作一两次，然后在我刷新页面之前第三次无法工作。

有人知道为什么吗？

var sliderMenu = document.getElementById("slider-menu");
var close = document.getElementById("X");


sliderMenu.addEventListener("click", (event) => {
  activate();
  console.log(event)
});

close.addEventListener("click", (event) => {
  closeNav();
});


function activate(event) {
  var sliderMenuOpen = document.getElementById("slider-menu-open");
  sliderMenuOpen.classList.toggle("width");
}

function closeNav(event) {
  var sliderMenuOpen = document.getElementById("slider-menu-open");
  sliderMenuOpen.classList.toggle("width-close");
}

<div class="slider-menu" id="slider-menu">
  <p>More</p>
</div>
<div class="slider-menu-open" id="slider-menu-open">
  <a id="X" href="">X</a>
  <a href="">Carpet Cleaning</a>
  <a href="">Blinds</a>
  <a href="">Flooring</a>
  <a href="">Rugs</a>
</div>
</div>

格罗弗。

尝试这样的事情。它消除了对额外课程的需要width-close

// i moved this to outside the functions so that you don't have to keep
// unnecessarily setting sliderMenuOpen
var sliderMenuOpen = document.getElementById("slider-menu-open");

var sliderMenu = document.getElementById("slider-menu");
var close = document.getElementById("X");
sliderMenu.addEventListener("click", (ev)=>{
    sliderMenuOpen.classList.add("width");
});
close.addEventListener("click", (ev)=>{
    sliderMenuOpen.classList.remove("width");
});

如果您使用旧代码检查 DOM，您会注意到在单击关闭和打开几次后它们都会在错误的时间处于活动状态（或非活动状态）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。