如何为每个div ID链式调用JS显示/隐藏函数并切换符号？

嘿，我明白你遇到的麻烦了——只有第一个减号能正常工作，其他的没反应，还得实现点击某个加号时把其他的减号都切回加号。咱们一步步来搞定：

问题根源 #

你之前的代码大概率是用了document.querySelector()或者getElementById()这类只会选中第一个匹配元素的方法，所以只有第一个<p>绑定了事件，其他的自然没反应。要批量处理，得选中所有目标元素再逐个绑定事件。

解决方案代码实现 #

下面是完整的可运行代码，完美实现你要的效果：

HTML结构 #

<div class="toggle-container">
  <p class="toggle-trigger">标题 1 <span>-</span></p>
  <div class="toggle-content">这是第一个容器的内容，点击减号会隐藏，点击加号会显示，同时其他容器会收起。</div>
</div>

<div class="toggle-container">
  <p class="toggle-trigger">标题 2 <span>-</span></p>
  <div class="toggle-content">这是第二个容器的内容，现在点击它的符号也能正常工作啦！</div>
</div>

<div class="toggle-container">
  <p class="toggle-trigger">标题 3 <span>-</span></p>
  <div class="toggle-content">这是第三个容器的内容，状态同步完全没问题~</div>
</div>

CSS样式 #

.toggle-container {
  margin: 10px 0;
  border: 1px solid #eee;
  padding: 10px;
}

.toggle-trigger {
  margin: 0;
  cursor: pointer;
  font-weight: bold;
}

.toggle-content {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #ddd;
}

JavaScript逻辑 #

// 选中所有触发点击事件的p元素
const triggers = document.querySelectorAll('.toggle-trigger');

// 给每个触发元素绑定点击事件
triggers.forEach(trigger => {
  trigger.addEventListener('click', function() {
    const symbol = this.querySelector('span');
    const content = this.nextElementSibling;
    
    // 先处理当前元素的状态切换
    if (symbol.textContent === '-') {
      symbol.textContent = '+';
      content.style.display = 'none';
    } else {
      // 点击加号时，先把所有其他元素的状态重置
      triggers.forEach(otherTrigger => {
        if (otherTrigger !== this) {
          const otherSymbol = otherTrigger.querySelector('span');
          const otherContent = otherTrigger.nextElementSibling;
          otherSymbol.textContent = '+';
          otherContent.style.display = 'none';
        }
      });
      // 再切换当前元素的状态
      symbol.textContent = '-';
      content.style.display = 'block';
    }
  });
});

代码解释 #

1. 批量绑定事件：用document.querySelectorAll('.toggle-trigger')选中所有带触发功能的<p>元素，再通过forEach循环给每个元素添加点击事件监听器，这样所有元素都能响应点击了。
2. 状态同步逻辑：当点击某个加号（要展开内容）时，先遍历所有其他触发元素，把它们的符号改成+并隐藏内容，再把当前元素的符号改成-并显示内容，完美实现“点击一个展开，其他全部收起”的效果。
3. 元素关系处理：用nextElementSibling直接获取触发元素后面的内容容器，不用依赖ID，结构更灵活，新增容器也不用改JS代码。

这样修改后，不管你加多少个toggle-container，都会自动生效，完全满足批量实现的需求~

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