Question

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

有人知道这是为什么吗？

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>

Answer 1

尝试类似这样的方法。它不需要额外的类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，您会发现在单击关闭并打开几次后，它们在错误的时间都处于活动状态（或处于非活动状态）。

Answer 2

如果您可以共享CSS会很有帮助。

虽然我不确定您的CSS正在做什么，但问题可能是您在单击width时切换More，而在单击width-close时切换X。 / p>

在点击More时，您添加了width类，然后在点击关闭时，添加了width-close，然后再次单击打开时，它删除了width（而不是添加它是第一次做的。然后单击关闭，它会再次自行添加width-close。

这可能是原因，但我不确定我没有看到CSS。

对于X和More都将使用的关闭和打开均只有一个切换功能会更好。然后，您可以在菜单打开时将More文本更新为Less

为什么必须重新加载页面才能使JS事件正常工作？

2 个答案: