JavaScript控制侧边栏开关需点击两次才触发，如何修复？

问题根因 #

1. 核心问题是你把侧边栏切换按钮的事件绑定逻辑，嵌套在了document.onclick的回调函数中。这意味着：你第一次点击页面任意位置（包括第一次点侧边栏切换按钮）的时候，才会给切换按钮真正绑定上click事件，第一次点击本身不会触发刚绑定的切换逻辑，所以需要点击第二次才会生效，关闭的时候也是同理。
2. 额外的逻辑冗余：你外层还套了DOMContentLoaded监听，如果LoadContent函数本身就是在DOM加载完成后调用的，这层监听完全多余；同时你给document.onclick赋值的写法会覆盖document上之前绑定的其他点击事件，存在副作用。
3. 代码细节问题：mainbodypd变量没有加声明关键字，会隐式成为全局变量，容易引发意料之外的问题。

修复后代码 #

function LoadContent() {
    const showNavbar = (toggleId, navId, pId, headerId) => {
        const toggle = document.getElementById(toggleId),
            nav = document.getElementById(navId),
            bodypd = document.getElementById(pId),
            headerpd = document.getElementById(headerId),
            mainbodypd = document.getElementById("mainbody");
        

        if (toggle && nav && bodypd && headerpd && mainbodypd) {
            toggle.addEventListener("click",
                () => {
                    nav.classList.toggle("show");
                    toggle.classList.toggle("bx-x");
                    bodypd.classList.toggle("body-pd");
                    headerpd.classList.toggle("body-pd");
                    mainbodypd.classList.toggle("height-100short");

                });
        }
    };

    showNavbar("header-toggle", "nav-bar", "body-pd", "header");

    const linkColor = document.querySelectorAll(".nav_link");

    function colorLink() {
        if (linkColor) {
            linkColor.forEach(l => l.classList.remove("active"));
            this.classList.add("active");
        }
    }

    linkColor.forEach(l => l.addEventListener("click", colorLink));
}

调用注意事项 #

直接在DOM加载完成后调用一次LoadContent()即可，不要重复调用，避免重复绑定事件。如果是Blazor项目的话，建议在页面的OnAfterRenderAsync生命周期钩子中调用这个函数，且只在首次渲染的时候调用，避免Blazor重渲染后重复绑定事件。

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