如何使用JavaScript实现点击按钮时切换+/-显示符号

你现有代码已经实现了点击时给nav节点切换active类的核心逻辑，符号切换可以按以下两种方式实现，优先推荐第一种，后续替换自定义图标更方便。

方案1：CSS类绑定控制（推荐） #

该方案不需要额外编写状态判断的JS代码，所有显示效果和active类状态绑定，后续替换自定义图标仅需修改CSS，维护成本最低。

1. 先修改HTML，把按钮内硬编码的+符号去掉：

   <!-- 把原来的<div id="btn-mobile">+</div>改成下面的写法 -->
   <div id="btn-mobile"></div>
   

2. 新增CSS样式，通过伪元素控制不同状态下的显示内容：

   /* 默认菜单收起状态显示 + */
   #btn-mobile::after {
     content: "+";
   }
   /* 菜单展开（nav带active类）状态显示 - */
   #nav.active #btn-mobile::after {
     content: "-";
   }
   

后续如果要替换成自定义图标（比如汉堡图标/关闭图标），只需要修改上面两段CSS的content为图标字符，或者替换为background属性引入图标图片即可，不需要改动JS逻辑。

方案2：JS直接修改文本 #

如果不想调整CSS，也可以直接在现有切换函数里加文本判断逻辑，修改后的JS代码如下：

const btnMobile = document.getElementById('btn-mobile');

function toggleMenu() {
  const nav = document.getElementById('nav');
  nav.classList.toggle('active');
  // 根据当前文本切换符号
  btnMobile.innerText = btnMobile.innerText === "+" ? "-" : "+";
}

btnMobile.addEventListener('click', toggleMenu);

该方案的缺点是后续替换自定义图标时，需要同步修改JS的判断逻辑，灵活度不如CSS控制方案。

提示：不管用哪种方案，建议始终把菜单展开/收起的状态和nav的active类绑定，避免出现符号状态和菜单实际显示状态不一致的bug。

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