JSP中c:foreach内jQuery展开/折叠功能失效问题求助

看起来你遇到的是动态生成元素的事件绑定典型问题——要么是元素标识重复导致操作只作用在第一个内容上，要么是事件没有正确绑定到循环生成的按钮上。我来帮你拆解问题并给出修复方案：

问题根源 #

你当前的代码里，所有展开/折叠按钮用了同一个类名（比如plusminus1），且折叠内容没有和按钮一一对应的唯一标识；另外如果是页面加载完成后通过c:forEach动态生成的元素，直接绑定click事件只会作用在页面加载时已存在的第一个元素上，后续循环生成的按钮根本不会触发事件。

修复步骤 #

1. 修正JSP代码，给每个元素添加唯一标识 #

修改c:forEach循环，利用varStatus的索引值给每个折叠内容生成唯一ID，同时让按钮通过data-target属性关联对应的内容：

<div class="accordion_container">
  <table>
    <!-- 假设yourList是你要循环的数据集，item是当前项 -->
    <c:forEach items="${yourList}" var="item" varStatus="status">
      <tr>
        <td>
          <div class="accordion_h">
            ${item.firstColumnValue} <!-- 第一列的具体值 -->
            <!-- 用data-target关联对应的折叠内容ID -->
            <span class="plusminus" data-target="accordion-content-${status.index}">+</span>
          </div>
        </td>
        <td>
          <!-- 给折叠内容设置唯一ID，默认隐藏 -->
          <div id="accordion-content-${status.index}" class="accordion_content" style="display: none;">
            <!-- 循环渲染第二列的多个值 -->
            <c:forEach items="${item.secondColumnValues}" var="subItem">
              <p>${subItem}</p>
            </c:forEach>
          </div>
        </td>
      </tr>
    </c:forEach>
  </table>
</div>

2. 用事件委托绑定jQuery事件 #

改用事件委托的方式绑定点击事件，这样即使是循环动态生成的按钮，也能正确触发展开/折叠操作：

$(document).ready(function() {
  // 绑定事件到父容器，监听所有.plusminus按钮的点击
  $('.accordion_container').on('click', '.plusminus', function() {
    // 获取当前按钮对应的目标内容ID
    var targetContentId = $(this).data('target');
    var $targetContent = $('#' + targetContentId);
    
    // 切换内容的显示/隐藏状态
    $targetContent.toggle();
    
    // 切换按钮的+/-符号
    $(this).text($targetContent.is(':visible') ? '-' : '+');
  });
});

关键注意事项 #

• 绝对不要给循环生成的元素设置重复ID，必须保证每个折叠内容的ID唯一（这里用status.index实现）
• 事件委托是处理动态生成元素事件的最佳方案，它把事件绑定到已存在的父元素上，后续新增的子元素也能触发事件
• 用data-*属性关联按钮和内容，比硬编码选择器更清晰且易于维护

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