移动端点击汉堡图标导航栏不显示的Django项目问题

核心问题分析 #

1. 移动端导航容器被完全隐藏
   在你的移动端媒体查询中，nav元素被设置为display: none，这意味着无论内部的<ul>如何切换show类，整个导航容器都不会显示，这是点击汉堡图标无反应的根本原因。

2. （可选）元素选择器不匹配
   你的JavaScript中使用了.container nav ul来选择导航菜单，但提供的HTML代码中<nav>并没有.container父元素。如果实际项目中也没有这个容器，会导致无法获取到导航菜单元素，不过你提到控制台输出符合预期，可能你的实际HTML中存在该容器，此问题可忽略。

修复步骤 #

1. 修正CSS移动端样式

移除nav的display: none设置，改为通过控制<ul>的transform属性实现显示/隐藏：

@media only screen and (max-width: 768px) {
    /* 移除nav的display:none，确保容器可见 */
    nav {
        display: block;
    }

    .hamburger-menu {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        cursor: pointer;
        padding: 10px;
        z-index: 1001;
    }

    .bar {
        width: 25px;
        height: 3px;
        background-color: #ffffff;
        margin: 5px 0;
    }

    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        transition: transform 0.3s ease;
        transform: translateY(-100%);
        position: fixed;
        top: 0;
        right: 0;
        background-color: #ffffff;
        border: 1px solid #ccc;
        padding: 10px;
        z-index: 1000;
    }

    nav ul.show {
        transform: translateY(0);
    }
}

@media only screen and (min-width: 769px) {
    .hamburger-menu {
        display: none;
    }

    nav {
        display: block;
    }
    /* 桌面端重置ul的transform，避免影响布局 */
    nav ul {
        transform: translateY(0);
        position: static;
        background-color: transparent;
        border: none;
    }
}

2. 调整HTML初始状态

移除<ul>的默认show类，确保移动端初始状态下菜单是隐藏的：

<nav>
    <ul>
        <li><a href="#whatwedo">What We Do?</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#about-page">About Us</a></li>
        <li><a href="#contact" class="contact-btn">Contact Us</a></li>
    </ul>
</nav>
<div class="hamburger-menu">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>

3. 修正JavaScript选择器（如果需要）

如果你的HTML中确实没有.container父元素，修改选择器为直接匹配<nav ul>：

<script>
document.addEventListener("DOMContentLoaded", function () {
        console.log('DOMContentLoaded event fired');
        var hamburgerMenu = document.querySelector('.hamburger-menu');
        var navMenu = document.querySelector('nav ul');
        console.log('Hamburger menu:', hamburgerMenu);
        console.log('Nav menu:', navMenu);
        if (hamburgerMenu && navMenu) {
            console.log('Event listener added to hamburger menu');

            hamburgerMenu.addEventListener('click', function () {
                console.log('Hamburger menu clicked');
                navMenu.classList.toggle('show');
                console.log('Nav menu visibility toggled');
            });
        } else {
            console.error('Unable to find hamburger menu or nav menu');
        }
    });
</script>

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