折叠导航栏JavaScript代码无响应问题排查求助

Hey there! Let's figure out why your collapse navbar isn't working. After looking through your code, I spotted a few key issues that are causing the problem—let's break them down one by one and fix them together.

1. Core JavaScript Issues #

• Your functions never run: You defined showNav() and hideNav() but never called them, so the click event listeners never get attached to the hamburger button.
• Infinite recursion risk: Both functions call themselves inside the click handler, which would crash your page if they ever executed.
• Selector typo: In showNav(), you wrote document.querySelector("index-nav")—missing the dot (.) for the class selector, so it can't find the navigation element.
• Conflicting click handlers: Attaching two separate click events to the same button leads to unpredictable behavior. We need a single toggle function to switch between showing and hiding the navbar.

2. CSS Typos & Improvements #

• Class name mismatch: You used .pic-ink in CSS but the HTML has pic-link—this breaks the logo link styling.
• Better state management: Instead of directly modifying inline styles with JS, use a CSS class (like .active) to control visibility. This makes code cleaner and easier to maintain.
• Smooth transitions: Add transition properties to the navbar so the show/hide animation feels polished (you already have transitions on the hamburger lines—let's extend that to the navbar).

Fixed Code Examples #

Updated HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Welcome to my Portfolio</title>
</head>
<body>
    <header class="index-header">
        <a href="index.html" class="pic-link" ><img src="logo/logo.png" alt="Portfolio Logo" class="pic" /></a>
        <section class="container">
            <div class="line-1"></div>
            <div class="line-2"></div>
            <div class="line-3"></div>
        </section>
        <nav class="index-nav">
            <ul class="ul-index">
                <li class="li-index"><a href="#home" class="a-index">Home</a></li>
                <li class="li-index"><a href="#about" class="a-index">About</a></li>
                <li class="li-index"><a href="#contact" class="a-index">Contact</a></li>
                <li class="li-index"><a href="#portfolio" class="a-index">Portfolio</a></li>
            </ul>
        </nav>
    </header>
    <main class="index-main">
        <img src="img/banner.png" alt="Hero Banner" class="main-img" />
    </main>
    <section id="home"></section>
    <section id="about"></section>
    <section id="contact"></section>
    <section id="portfolio"></section>
    <section id="case"></section>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
    <script src="js/main.js"></script>
</body>
</html>

Updated CSS

* {
    box-sizing: border-box;
}

.index-header {
    width: 100%;
    height: 100px;
    background-color: #569188;
    position: relative; /* Ensures absolute navbar positions correctly */
}

.index-header .pic-link {
    display: block;
}

.index-header .pic {
    width: 100px;
    height: 100px;
}

.index-header .container {
    display: inline-block;
    float: right;
    margin: 30px 20px; /* Positions hamburger nicely */
    cursor: pointer; /* Shows pointer on hover */
}

.container .line-1, .line-2, .line-3 {
    width: 35px;
    height: 5px;
    background-color: #fff;
    margin: 6px 0;
    transition: 0.4s;
}

/* Navbar base state (collapsed) */
.index-header .index-nav {
    position: absolute;
    top: 100px;
    right: 0;
    background-color: #569188;
    width: 0;
    height: 0;
    z-index: 3;
    opacity: 0;
    transition: all 0.4s ease; /* Smooth animation for all properties */
    overflow: hidden; /* Hides content when collapsed */
}

/* Navbar active state (expanded) */
.index-header .index-nav.active {
    width: 40vw;
    height: 40vh;
    opacity: 1;
}

.index-nav .ul-index {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 20px 0;
}

.ul-index .li-index {
    display: flex;
    justify-content: center;
    padding: 15px;
    font-size: 18px;
    list-style: none;
}

.ul-index .li-index .a-index {
    text-decoration: none;
    color: #111;
    font-weight: 900;
}

.index-main .main-img {
    width: 100vw;
    height: 200px;
    margin-bottom: 20px;
}

/* Optional: Animate hamburger to X when active */
.container.active .line-1 {
    transform: rotate(-45deg) translate(-9px, 6px);
}

.container.active .line-2 {
    opacity: 0;
}

.container.active .line-3 {
    transform: rotate(45deg) translate(-8px, -8px);
}

Updated JavaScript

// Wait for DOM to load before attaching events
document.addEventListener('DOMContentLoaded', function() {
    const hamburgerBtn = document.querySelector('.container');
    const navBar = document.querySelector('.index-nav');

    // Single toggle handler for navbar state
    hamburgerBtn.addEventListener('click', function() {
        navBar.classList.toggle('active');
        // Optional: Toggle hamburger animation
        hamburgerBtn.classList.toggle('active');
    });
});

Key Fixes Recap #

• Replaced conflicting/recursive functions with a single toggle handler
• Fixed selector and CSS class typos
• Used CSS classes instead of inline styles for state management
• Added proper DOM load listener to ensure elements exist before attaching events
• Added smooth transitions for a better user experience

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