响应式下拉菜单无法关闭：汉堡按钮及closeMenu函数异常求助

Hey there! Let's get those menu problems sorted out for your personal site. I'll break down the fixes step by step, with code examples you can drop right in.

First, Let's Diagnose the Issues #

From your description, we have two main problems:

1. The hamburger button (toggleMenu) only opens the menu, not closes it on the second click.
2. The close icon inside .dropdown-menu-content doesn't trigger the closeMenu() function at all.

Solution 1: Fix the Toggle Functionality (Hamburger Button) #

The most common reason the toggle doesn't work both ways is that your original function only sets the menu to show, without checking its current state. We need to add logic to switch between showing and hiding the menu.

Option A: Direct Style Manipulation #

If you prefer to keep using inline styles, update your JavaScript like this:

// Grab references to your elements first
const dropdownMenu = document.querySelector('.dropdown-menu-content');
const toggleButton = document.getElementById('toggleMenu');

function toggleMenu() {
  // Check if the menu is currently visible
  if (dropdownMenu.style.display === 'block' || dropdownMenu.style.display === '') {
    // If visible, hide it
    dropdownMenu.style.display = 'none';
  } else {
    // If hidden, show it
    dropdownMenu.style.display = 'block';
  }
}

// Bind the click event to your hamburger button
toggleButton.addEventListener('click', toggleMenu);

Option B: Using CSS Classes (Recommended) #

This method is cleaner and more maintainable—we'll use a CSS class to control visibility instead of inline styles:

First, update your CSS:

/* Default state: menu is hidden */
.dropdown-menu-content {
  display: none;
  /* Keep your existing styles here */
}

/* Active state: menu is visible */
.dropdown-menu-content.active {
  display: block;
}

Then update your JavaScript:

const dropdownMenu = document.querySelector('.dropdown-menu-content');
const toggleButton = document.getElementById('toggleMenu');

function toggleMenu() {
  // Toggle the "active" class on the menu
  dropdownMenu.classList.toggle('active');
}

toggleButton.addEventListener('click', toggleMenu);

This approach keeps your styling in CSS where it belongs, making it easier to adjust animations or other styles later.

Solution 2: Fix the Close Icon Not Responding #

The close icon isn't working because it's likely not bound to the closeMenu() function properly. Let's fix that:

Add the Click Event to the Close Icon #

Using the class-based approach from above, update your JavaScript to include:

const closeIcon = document.querySelector('.dropdown-menu-content img:last-child');

function closeMenu() {
  // Remove the active class to hide the menu
  dropdownMenu.classList.remove('active');
}

// Bind the click event to the close icon
closeIcon.addEventListener('click', closeMenu);

If you're using the inline style approach, adjust closeMenu() to set display: none instead:

function closeMenu() {
  dropdownMenu.style.display = 'none';
}

Important Check #

Make sure your close icon has no other overlapping elements that might be blocking clicks (like a parent div with pointer-events: none). If you're still having trouble, try adding pointer-events: all to the close icon's CSS to ensure it receives clicks.

Full Working Example (Class-Based) #

Here's the complete code put together for reference:

<!-- HTML -->
<button id="toggleMenu">☰</button>
<div class="dropdown-menu-content">
  <!-- Your menu items here -->
  <img src="your-close-icon.png" alt="Close menu">
</div>

/* CSS */
.dropdown-menu-content {
  display: none;
  /* Your existing styles: position, padding, etc. */
}

.dropdown-menu-content.active {
  display: block;
}

/* Optional: Ensure close icon is clickable */
.dropdown-menu-content img:last-child {
  cursor: pointer;
  pointer-events: all;
}

// JavaScript
const dropdownMenu = document.querySelector('.dropdown-menu-content');
const toggleButton = document.getElementById('toggleMenu');
const closeIcon = document.querySelector('.dropdown-menu-content img:last-child');

function toggleMenu() {
  dropdownMenu.classList.toggle('active');
}

function closeMenu() {
  dropdownMenu.classList.remove('active');
}

toggleButton.addEventListener('click', toggleMenu);
closeIcon.addEventListener('click', closeMenu);

That should resolve both issues—your hamburger button will toggle the menu open/closed, and the close icon will hide the menu when clicked.

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