点击汉堡菜单时切换品牌Logo的src（SVG图片）实现方法问询

我懂你的需求啦——点击汉堡菜单时替换Logo的SVG（因为背景颜色不匹配），再次点击又恢复原Logo，对吧？你现有的代码已经搞定了导航的展开收起和链接动画，只需要加上操作Logo元素的逻辑就行，很简单！

具体修改步骤： #

1. 先获取你的Logo元素：用document.querySelector选中页面里的Logo图片，记得替换成你实际的选择器（比如.header__logo，要和HTML里的类名对应）。
2. 定义两个Logo的地址：把原Logo和切换后的SVG地址存成变量，方便后续维护。
3. 在汉堡的点击事件里加切换逻辑：用一个布尔变量跟踪当前Logo状态，点击时切换状态并更新Logo的src属性。

修改后的完整代码： #

const navSlide = () => {
  const hamburger = document.querySelector('.hamburger');
  const nav = document.querySelector('.header__links');
  const navLinks = document.querySelectorAll('.header__links a');
  // 1. 获取Logo元素，替换成你实际的选择器
  const logo = document.querySelector('.header__logo');
  // 2. 定义两个Logo的地址，替换成你自己的SVG路径
  const originalLogoSrc = '/path/to/original-logo.svg';
  const alternateLogoSrc = '/path/to/alternate-logo.svg';
  // 用变量跟踪当前Logo状态
  let isAlternateLogo = false;

  hamburger.addEventListener('click', () => {
    // toggle nav
    nav.classList.toggle('header__nav-active');

    // 3. 切换Logo图片
    if (isAlternateLogo) {
      logo.src = originalLogoSrc;
    } else {
      logo.src = alternateLogoSrc;
    }
    // 切换状态标记
    isAlternateLogo = !isAlternateLogo;

    // animate links
    navLinks.forEach((a, index) => {
      if (a.style.animation) {
        a.style.animation = '';
        // 可选：恢复链接默认颜色
        a.style.color = '';
      } else {
        a.style.animation = `navLinkFade 0.5s ease forwards ${index / 6 + 0.3}s`;
        a.style.color = `#ffffff`;
      }
    });
  });
}

navSlide();

关键说明： #

• 选择器要匹配：确保document.querySelector('.header__logo')里的类名和你HTML中Logo图片的类名完全一致，比如如果你的Logo是<img class="site-logo" src="...">，就改成.site-logo。
• 路径要正确：originalLogoSrc和alternateLogoSrc要填对SVG的实际路径，相对路径或者绝对路径都可以。
• 链接颜色恢复：代码里加了a.style.color = ''，这样关闭导航时链接颜色会恢复默认值，如果你不需要这个逻辑可以直接删掉这行。

这样每次点击汉堡菜单，Logo就会在两张SVG之间切换啦！

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