Navbar Toggler点击页面任意区域自动关闭问题求助

问题描述 #

导航栏包含Dropdown组件，在移动端点击菜单按钮展开左侧导航后，点击页面任意区域（包括Dropdown本身）都会导致导航菜单关闭，无法正常打开Dropdown。需求改为仅点击关闭按钮（✖）时才关闭导航菜单。

问题原因 #

1. 原代码未给关闭按钮绑定关闭导航的事件，导致点击✖无法触发菜单关闭。
2. 全局body点击事件的判断逻辑有缺陷：仅排除了.sidebarOpen和.menu元素，但点击Dropdown内部元素时，目标元素不属于这两类，会误触发导航关闭。

解决方案 #

步骤1：给关闭按钮添加点击事件 #

新增关闭按钮的事件监听，确保点击✖时能关闭导航：

siderbarClose.addEventListener("click", () => {
    nav.classList.remove("active");
});

步骤2：修改全局点击事件的判断逻辑 #

使用closest()方法判断点击元素是否属于菜单容器内部，避免点击Dropdown时触发导航关闭：

body.addEventListener("click", e => {
    let clickedElm = e.target;
    // 检查点击元素是否在菜单容器内，或者是关闭按钮
    const isInsideMenu = clickedElm.closest(".menu") !== null;
    const isCloseButton = clickedElm.classList.contains("siderbarClose");

    // 仅当点击的不是菜单按钮、不在菜单内、也不是关闭按钮时，才关闭导航
    if (!clickedElm.classList.contains("sidebarOpen") && !isInsideMenu && !isCloseButton) {
        nav.classList.remove("active");
    }
});

完整修改后的JavaScript代码 #

const body = document.querySelector("body"),
    nav = document.querySelector("nav"),
    modeToggle = document.querySelector(".dark-light"),
    searchToggle = document.querySelector(".searchToggle"),
    sidebarOpen = document.querySelector(".sidebarOpen"),
    siderbarClose = document.querySelector(".siderbarClose");

let getMode = localStorage.getItem("mode");
if (getMode && getMode === "dark-mode") {
    body.classList.add("dark");
}

// 切换搜索框
searchToggle.addEventListener("click", () => {
    searchToggle.classList.toggle("active");
});

// 打开侧边栏
sidebarOpen.addEventListener("click", () => {
    nav.classList.add("active");
});

// 通过关闭按钮关闭侧边栏
siderbarClose.addEventListener("click", () => {
    nav.classList.remove("active");
});

// 点击外部关闭侧边栏的逻辑
body.addEventListener("click", e => {
    let clickedElm = e.target;
    const isInsideMenu = clickedElm.closest(".menu") !== null;
    const isCloseButton = clickedElm.classList.contains("siderbarClose");

    if (!clickedElm.classList.contains("sidebarOpen") && !isInsideMenu && !isCloseButton) {
        nav.classList.remove("active");
    }
});

说明 #

• closest(".menu")可以检测点击元素是否属于.menu容器的后代元素，这样点击Dropdown及其子元素时，都会被判定为菜单内操作，不会触发导航关闭。
• 新增的关闭按钮事件确保了只有点击✖时才会关闭导航，完全符合需求。

内容的提问来源于stack exchange，提问作者Muhammad Ismail