请求简化菜单点击切换'on'类的重复JavaScript代码

方案一：保留原toggle逻辑（支持点击已选中项取消选中） #

const colorItems = document.querySelector('#color').children[1];
const menuItems = Array.from(colorItems.children);

menuItems.forEach(item => {
  item.addEventListener('click', () => {
    menuItems.forEach(menuItem => {
      menuItem === item 
        ? menuItem.classList.toggle('on') 
        : menuItem.classList.remove('on');
    });
  });
});

方案二：单选逻辑（始终保持一个菜单项选中） #

如果你的菜单是单选需求（点击新项时自动选中，点击已选中项不会取消），可以用更简洁的写法：

const colorItems = document.querySelector('#color').children[1];
const menuItems = Array.from(colorItems.children);

menuItems.forEach(item => {
  item.addEventListener('click', () => {
    // 移除所有项的激活样式
    menuItems.forEach(menuItem => menuItem.classList.remove('on'));
    // 给当前点击项添加激活样式
    item.classList.add('on');
  });
});

简化思路 #

1. 先把所有菜单项转为数组，方便遍历操作
2. 统一给每个菜单项绑定点击事件，避免重复编写事件处理逻辑
3. 通过遍历实现「当前项切换/添加样式，其他项移除样式」的统一逻辑，后续菜单项数量增减时，代码无需修改

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