如何使用JavaScript onClick函数切换Logo？切换异常问题求助

你的代码存在两个关键问题：

• 仅在sidebar激活时设置了新Logo，但取消激活时没有恢复原Logo，导致按钮取消点击后Logo不变。
• 初始状态下sidebar的active类与Logo路径可能不匹配，引发“点击两次才切换Logo”的异常。

修正后的代码 #

let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".sidebarBtn");
// 替换成你实际的原Logo路径
const originalLogo = "原Logo文件名.png";
const activeLogo = "mdn-logo.png";

// 初始化：确保页面加载时Logo与sidebar状态匹配
if (sidebar.classList.contains("active")) {
  document.getElementById("img").src = activeLogo;
  sidebarBtn.classList.replace("bx-menu", "bx-menu-alt-right");
} else {
  document.getElementById("img").src = originalLogo;
}

sidebarBtn.onclick = function () {
  sidebar.classList.toggle("active");
  if (sidebar.classList.contains("active")) {
    sidebarBtn.classList.replace("bx-menu", "bx-menu-alt-right");
    document.getElementById("img").src = activeLogo;
  } else {
    sidebarBtn.classList.replace("bx-menu-alt-right", "bx-menu");
    // 恢复原Logo
    document.getElementById("img").src = originalLogo;
  }
};

关键修改点 #

• 新增originalLogo变量存储原Logo路径，在sidebar取消激活时设置回这个路径。
• 添加初始化逻辑，确保页面刚加载时，Logo和按钮图标就与sidebar的初始状态（是否有active类）保持一致，避免首次点击出现异常。

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