移动端侧边栏点击开关功能失效求助（附HTML/CSS/JS代码）

问题核心原因 #

结合你提供的代码，按钮点击无响应主要源于三个关键问题：

1. JS执行时机错误 #

如果JS代码在DOM元素加载完成前执行（比如放在<head>标签中），document.getElementById会返回null，导致点击事件无法绑定，按钮自然没有响应。

2. 移动端侧边栏默认隐藏样式缺失 #

你的CSS仅定义了.show类的display: block !important，但未在移动端视图（≤768px）下设置#tm-main-nav的默认隐藏样式。初始状态下侧边栏本来就是显示的，点击按钮切换show类时视觉上没有变化，让你误以为功能失效。

3. 桌面端侧边栏显示逻辑矛盾 #

桌面端（>768px）你移除了show类，但未设置#tm-main-nav的默认显示样式，可能导致桌面端侧边栏无法正常展示。

修复方案 #

1. 调整JS执行时机 #

将JS代码放在</body>标签前，或用DOMContentLoaded事件包裹，确保DOM加载完成后再执行元素获取和事件绑定：

document.addEventListener('DOMContentLoaded', function() {
    var navbarToggler = document.getElementById("navbar-toggler");
    var mainNav = document.getElementById("tm-main-nav");

    function toggleNavbar() {
        mainNav.classList.toggle("show");
    }

    // 增加元素存在判断，避免控制台报错
    if (navbarToggler && mainNav) {
        navbarToggler.addEventListener("click", toggleNavbar);
    }

    function checkDeviceWidth() {
        if (window.innerWidth <= 768) {
            navbarToggler.style.display = "block";
            mainNav.classList.remove("show");
        } else {
            navbarToggler.style.display = "none";
            mainNav.classList.add("show"); // 桌面端默认显示侧边栏
        }
    }

    window.addEventListener("load", checkDeviceWidth);
    window.addEventListener("resize", checkDeviceWidth);
});

2. 完善CSS媒体查询样式 #

添加媒体查询，明确移动端和桌面端的侧边栏显示逻辑：

/* 默认桌面端样式 */
#tm-main-nav {
    display: block;
}

.navbar-toggler {
    display: none;
}

/* 移动端视图（≤768px） */
@media (max-width: 768px) {
    #tm-main-nav {
        display: none;
    }

    .show {
        display: block !important;
    }

    .navbar-toggler {
        display: block;
    }
}

3. 修正HTML冗余标签（可选） #

你提供的HTML末尾多了一个</div>，修正后确保DOM结构正确：

<div id="tm-sidebar" class="tm-sidebar">
    <nav class="tm-nav">
        <button id="navbar-toggler" class="navbar-toggler" type="button" aria-label="Toggle navigation">
            <i class="fas fa-bars"></i>
        </button>
        <div>
            <div class="tm-brand-box">
                <img src="img/37.png" width="100%" height="180" alt="Logo">
            </div>
            <ul id="tm-main-nav">
                <li class="nav-item">
                    <a href="#home" class="nav-link current">
                        <div class="triangle-right"></div>
                        <i class="fas fa-home nav-icon"></i>
                        Home
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#about" class="nav-link">
                        <div class="triangle-right"></div>
                        <i class="fas fa-images nav-icon"></i>
                        About
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#afc" class="nav-link">
                        <div class="triangle-right"></div>
                        <i class="fas fa-envelope nav-icon"></i>
                        Armed Forces
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#contact" class="nav-link">
                        <div class="triangle-right"></div>
                        <i class="fas fa-envelope nav-icon"></i>
                        Contact
                    </a>
                </li>
                <li class="nav-item">
                    <a href="https://cp.dcsit.co.uk/" class="nav-link external" target="_new" rel="sponsored">
                        <div class="triangle-right"></div>
                        <i class="fas fa-external-link-alt nav-icon"></i>
                        Packages
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</div>

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