JSP手风琴组件重复数据分组展示问题求助：实现重复字段作为按钮关联对应内容

我完全懂你的困扰——现在你的代码会把每条数据都生成一个手风琴按钮，哪怕标题重复，而且内容也没正确对应分组对吧？这是因为你没有对重复的标题做去重和分组处理，直接遍历了所有数据项。

问题根源分析 #

你的外层<c:forEach>遍历了所有datas列表里的元素，所以每个数据项都会生成一个按钮，哪怕标题重复；内层的循环又遍历所有数据去找相同标题的内容，但这样不仅会让重复标题的按钮重复出现，还会导致每个重复按钮下面都显示相同的内容集合，完全不符合你想要的“一个标题对应一组内容”的效果。

推荐解决方案：在Servlet层先分组（更符合MVC设计） #

最佳实践是把数据分组的逻辑放在后端Servlet里，JSP只负责渲染页面，这样既清晰又能提升性能。

1. Servlet层修改：将列表转成分组Map

假设你的数据实体类是YourDataClass，在Servlet里把原始列表转换成以标题为Key、对应内容列表为Value的Map：

// 从数据库获取原始数据列表
List<YourDataClass> datas = yourDao.getDatas();

// 初始化分组Map，Key是标题（getData()返回值），Value是对应内容的列表
Map<String, List<String>> groupedData = new HashMap<>();

for (YourDataClass data : datas) {
    String title = data.getData();
    String content = data.getFin();
    
    // 如果当前标题还没在Map里，新建一个空列表
    if (!groupedData.containsKey(title)) {
        groupedData.put(title, new ArrayList<>());
    }
    // 将对应内容添加到列表中
    groupedData.get(title).add(content);
}

// 把分组后的Map放到request域中
request.setAttribute("groupedDatas", groupedData);

2. JSP层渲染分组后的数据

现在JSP只需要遍历这个Map，每个Key对应一个手风琴按钮，对应的Value列表就是按钮下的内容：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:forEach items="${groupedDatas}" var="entry">
    <!-- 手风琴按钮：使用Map的Key作为标题 -->
    <button class="accordion">${entry.key}</button>
    <!-- 对应内容面板：遍历Map的Value列表 -->
    <div class="panel">
        <c:forEach items="${entry.value}" var="content">
            <p>${content}</p>
        </c:forEach>
    </div>
</c:forEach>

备选方案：直接在JSP里做去重处理（适合无法修改Servlet的场景） #

如果你暂时无法修改后端代码，也可以在JSP里通过JSTL标签做去重判断，记录已经处理过的标题，避免重复生成按钮：

首先要引入JSTL的函数标签库：

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

然后修改循环逻辑：

<!-- 用一个变量记录已经处理过的标题，用逗号分隔避免匹配到子串 -->
<c:set var="processedTitles" value="" />

<c:forEach items="${datas}" var="data">
    <!-- 检查当前标题是否已经处理过 -->
    <c:if test="${!fn:contains(processedTitles, ',' + data.getData() + ',')}">
        <!-- 生成手风琴按钮 -->
        <button class="accordion">${data.getData()}</button>
        <!-- 生成对应内容面板 -->
        <div class="panel">
            <c:forEach items="${datas}" var="item">
                <c:if test="${data.getData() eq item.getData()}">
                    <p>${item.getFin()}</p>
                </c:if>
            </c:forEach>
        </div>
        <!-- 将当前标题标记为已处理 -->
        <c:set var="processedTitles" value="${processedTitles},${data.getData()}," />
    </c:if>
</c:forEach>

注意事项 #

• 第一种Servlet分组的方法性能更好（时间复杂度O(n)），而JSP内处理的方法是O(n²)，如果数据量大的话会有明显性能差异。
• 确保你的手风琴JS逻辑是正确绑定的，比如点击.accordion时只切换它相邻的.panel，避免所有面板同时展开/折叠。

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