点击切换图片（jQuery）：导航按钮图标切换异常求助

Hey there! Let's figure out why your nav button isn't toggling back properly between the menu and close icons. I've run into this exact issue before, so here are a few solid fixes based on common pitfalls:

The usual problem is that your code only handles the first switch (menu → close) but doesn't account for reversing it. Instead of replacing the image once, you need to check the current state first to decide which icon to show next.

Here's a vanilla JavaScript example that works both ways:

// Grab your button and its image element
const navButton = document.querySelector('.nav-toggle-button');
const navIcon = navButton.querySelector('img');

navButton.addEventListener('click', () => {
  // Check the current icon (using src or alt text - alt is more reliable)
  if (navIcon.alt === 'Open menu') {
    // Switch to close icon
    navIcon.src = 'path-to-close-icon.svg';
    navIcon.alt = 'Close menu';
  } else {
    // Switch back to menu icon
    navIcon.src = 'path-to-menu-icon.svg';
    navIcon.alt = 'Open menu';
  }
});

Pro tip: Using the alt text to check state avoids issues with absolute URLs messing up your src checks.

Instead of manipulating image src attributes directly, use CSS background images and toggle a class on the button. This method is less prone to bugs and easier to update later:

HTML: #

<button class="nav-button menu-icon"></button>

CSS: #

.nav-button {
  width: 40px;
  height: 40px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

.menu-icon {
  background-image: url('path-to-menu-icon.svg');
}

.close-icon {
  background-image: url('path-to-close-icon.svg');
}

JavaScript: #

const navButton = document.querySelector('.nav-button');

navButton.addEventListener('click', () => {
  // Toggle the class - this handles both switch directions automatically!
  navButton.classList.toggle('close-icon');
});

If your nav button is added to the page dynamically (e.g., loaded via AJAX or a framework), your initial event listener might not attach to it. Use event delegation in this case:

// Listen on a parent element that's always present (like document.body)
document.body.addEventListener('click', (e) => {
  const navButton = e.target.closest('.nav-button');
  if (navButton) {
    // Run your toggle logic here
    navButton.classList.toggle('close-icon');
  }
});

• Open your browser's DevTools (F12) and check the Elements tab to see if the src attribute or class is actually changing when you click.
• Add console.log(navIcon.src) inside your click handler to confirm your condition is evaluating correctly.
• Double-check your image paths—relative URLs can break if your page is in a subdirectory.

Hope one of these solutions gets your toggle working smoothly! Let me know if you need help adapting this to your specific code setup.

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