单击某个不能正常工作的位置后隐藏导航

Question

我有个汉堡导航。点击汉堡后，侧栏导航就会出现，再点击一次就会隐藏起来。我想做，所以我不需要点击汉堡按钮，但我可以点击其他地方(主容器，等等)。把侧边栏藏起来。这是汉堡按钮代码：

function navBurger() {
    var element = document.querySelector(".navbar");
    var burger = document.querySelector(".burger-btn");
    element.classList.toggle("extended");
    burger.classList.toggle("open");
}

这个部分工作得很好，但是当我添加以下内容时：

window.onclick = function() {
    var element = document.querySelector(".navbar");
    var burger = document.querySelector(".burger-btn");
    
    if (element.classList.contains("extended")) {
        window.onclick = function() {
            element.classList.remove("extended");
            burger.classList.remove("open");
        }
    } 
}

导航将隐藏后，第一次点击，但我不能显示，然后隐藏它后，第一次点击。就像脚本认为导航仍然有这个类一样(但是它被删除了)，并且不允许打开导航栏。有办法解决这个问题吗？

Answer 1

在您的原始代码中，在第一次打开导航后，单击窗口就会删除添加的类，然后单击菜单按钮，当事件冒泡时。要解决这个问题，请将event.stopPropagation()添加到菜单中，单击处理程序。

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

我还删除了onclick处理程序的重新绑定，因为它导致第一次单击没有正确关闭菜单。

​

function navBurger(e) {
    console.log('button clicked')
    var element = document.querySelector(".navbar");
    var burger = document.querySelector(".burger-btn");
    element.classList.toggle("extended");
    burger.classList.toggle("open");
    // Prevents the window onclick from firing after this function runs
    // try commenting this out
    e.stopPropagation();
}

window.onclick = function() {
    console.log('onclick triggered');
    var element = document.querySelector(".navbar");
    var burger = document.querySelector(".burger-btn");
    
    if (element.classList.contains("extended")) {
        element.classList.remove("extended");
        burger.classList.remove("open");
    } 
}

document.querySelector(".burger-btn").addEventListener("click", navBurger);

.navbar.extended {
  background: green;
}

.burger-btn.open::after {
  content: "Open";
  display: inline;
}

<nav class="navbar"><button class="burger-btn" type="button">Nav</button></nav>

​

Answer 2

造成这个问题的原因是全局单击处理程序用一个嵌套的无条件函数替换了自己，从而关闭了汉堡包菜单。第二次单击将打开菜单，但会一直泡到窗口处理程序，然后再次关闭它。

全局处理程序需要在关闭扩展菜单之前确定单击是否在扩展菜单内或外部。将closest方法应用于单击事件目标可以在这方面有所帮助。

window.onload = function() {
    var element = document.querySelector(".navbar");
    var burger = document.querySelector(".burger-btn");
    window.onclick = function(event) {
        if( burger.classList.contains("open") 
          && !event.target.closest(".extended") ) {
            // the click is outside an open extended element
            element.classList.remove("extended");
            burger.classList.remove("open");
        }    
    };
};

如果用户使用类"extended"在元素外部单击，上述选项应该会关闭汉堡包菜单。jQuery文档涵盖了JQuery closest方法和event.target (如果您希望用jQuery编写代码)。

注在window.onclick中设置window.onload以避免混淆，使用元素的oneventname属性最好在JavaScript中使用addEventListener调用。