為什么必須重新加載頁面才能使JS事件正常工作？

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在做什么，但問題可能是您單擊“ More時切換了width ，而單擊X時切換了width width-close 。

單擊More ，添加width類，然后單擊關閉，添加width-close然后再次單擊打開時，它刪除width （而不是第一次添加width ）。 然后單擊關閉，它會再次自行添加width-close 。

這可能是原因，但是我不確定我沒有看到CSS。

如果X和More都將同時使用關閉和打開的一個切換功能，那會更好。 打開菜單后，您可以將More文本更新為Less