点击切换功能异常：JavaScript循环代码修复求助

问题核心错误 #

你当前代码的失效原因主要有三点：

• 循环语法错误：for循环末尾多了分号，导致循环体为空，仅执行变量递增，最终访问数组时会出现索引越界（i等于数组长度，超出有效索引范围）。
• 全局变量污染：循环变量i未用let/const声明，会成为全局变量，导致后续逻辑混乱。
• 代码冗余且耦合度高：手动定义大量独立函数和数组，既不利于维护，也容易出现绑定错误。

优化修复方案 #

我们可以通过DOM结构关联+批量事件绑定的方式简化逻辑，实现箭头与子菜单的同步切换，同时处理同级菜单的折叠：

修复后的JavaScript代码 #

// 批量获取所有箭头元素
const arrows = document.querySelectorAll('.arrow');

// 为每个箭头绑定点击事件
arrows.forEach(arrow => {
  arrow.addEventListener('click', function() {
    // 获取当前箭头对应的子菜单（箭头的下一个兄弟元素就是目标ul）
    const subMenu = this.nextElementSibling;
    // 切换当前子菜单的显示/隐藏
    subMenu.classList.toggle('hidden');
    // 切换箭头的旋转状态
    this.classList.toggle('rotatearrow');

    // 折叠同级其他已展开的菜单
    const parentItem = this.closest('.indexitem');
    const siblingItems = parentItem.parentElement.querySelectorAll('.indexitem');
    
    siblingItems.forEach(item => {
      if (item !== parentItem) {
        const siblingArrow = item.querySelector('.arrow');
        const siblingSubMenu = item.querySelector('ul');
        if (siblingSubMenu && !siblingSubMenu.classList.contains('hidden')) {
          siblingSubMenu.classList.add('hidden');
          siblingArrow.classList.remove('rotatearrow');
        }
      }
    });
  });
});

方案说明 #

1. 批量元素获取：用querySelectorAll一次性获取所有箭头，避免逐个定义变量。
2. DOM结构关联：利用箭头与子菜单的相邻关系（nextElementSibling），无需手动绑定每个选择器。
3. 同级菜单自动折叠：点击菜单时，自动收起父容器内其他已展开的同级菜单。
4. 无全局变量污染：使用forEach遍历，每个箭头的事件逻辑独立，避免全局变量冲突。

其他说明 #

你的CSS和HTML结构无需修改，直接替换上述JavaScript代码即可实现需求。

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