JavaScript新手求助：如何将两个myFunction函数合并为一个？

你的两个myFunction分别负责两个功能：

• 切换导航栏（id为myTopnav）的responsive类，实现导航栏展开/收起
• 切换传入元素的change类，通常是汉堡菜单按钮的样式切换

直接把两个功能整合到一个函数里即可，下面提供两种实现方式：

方式一：保留原逻辑的合并版 #

function myFunction(triggerElement) {
  // 处理导航栏的responsive类切换
  const navElement = document.getElementById("myTopnav");
  if (navElement.className === "topnav") {
    navElement.className += " responsive";
  } else {
    navElement.className = "topnav";
  }

  // 处理触发元素的change类切换
  if (triggerElement) {
    triggerElement.classList.toggle("change");
  }
}

调用时，在汉堡按钮的点击事件里写onclick="myFunction(this)"，就能同时切换导航栏状态和按钮的change类。

方式二：优化后的更可靠版 #

原函数1的写法存在小缺陷：如果myTopnav元素有其他额外类名，navElement.className === "topnav"会判断失败。用classList.toggle更稳妥，能直接切换指定类且不影响其他类：

function myFunction(triggerElement) {
  // 优化导航栏类切换逻辑
  const navElement = document.getElementById("myTopnav");
  navElement.classList.toggle("responsive");

  // 处理触发元素的change类切换
  if (triggerElement) {
    triggerElement.classList.toggle("change");
  }
}

这个版本兼容性更好，代码也更简洁。

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