使用 Jquery 使嵌套的 forEach 循环下的每个部分可折叠答案

【问题标题】：Make each section under nested forEach loop collapsible using Jquery使用 Jquery 使嵌套的 forEach 循环下的每个部分可折叠
【发布时间】：2018-10-15 01:34:00
【问题描述】：

我是 JQuery 的超级新手，从昨天开始，我需要帮助。

我有一个 Map > dataMap，我想让 Map 中的所有条目都可以折叠，并且每个地图条目中的每个列表也可以折叠。我正在为所有这些条目创建按钮，它们的 ID 将在运行时根据从地图中检索到的值进行分配。我不知道该怎么做。任何帮助将不胜感激。

<a:section id="${'my-section-id'}">
    <a:heading>My Sample Page</a:heading>
    <c:forEach items="${dataMap}" var="map" varStatus="mainIndex">
        <!-- Make below section collapsible on click -->
        <a:button><c:out value="${map.key}" /></a:button>
            <c:forEach items="${map.value}" var="object" varStatus="childIndex">
                <!-- Make below section collapsible on click -->
                <a:button><c:out value="${object.key}" /> 
                </a:button>
                <!—Display rest of the content here -->
            </c:forEach>
    </c:forEach>
</a:section>

我可以通过执行类似“mainSection+mainIndex”和“childSection+childIndex”的操作来分配唯一的部分/按钮 ID，但不知道如何为此编写点击函数。

注意：它不一定是按钮。它可以是任何带有标签的组件

【问题讨论】：

标签： javascript jquery css jsp jquery-ui

【解决方案1】：

以下方法可行，但不确定是否是最好的方法

<a:section id="${'my-section-id'}">
    <a:heading>My Sample Page</a:heading>
    <div id="collapsible">
        <c:forEach items="${dataMap}" var="map" varStatus="mapStatus">
            <!-- Make below section collapsible on click -->
            <a:button data-showhideid="collapse_${mapStatus.index}">><c:out value="${map.key}" /></a:button>
            <div id="collapse_${mapStatus.index}">
                <c:forEach items="${map.value}" var="object" varStatus="valueStatus">
                    <a:button data-showhideid="collapse_${mapStatus.index}_${valueStatus.index}">
                    <div id="collapse_${mapStatus.index}_${valueStatus.index}">
                        <!-- Make below section collapsible on click -->
                        <a:button><c:out value="${object.key}" /> 
                        </a:button>
                        <!—Display rest of the content here -->
                    </div>
                </c:forEach>
            </div>
        </c:forEach>
    </div>
</a:section>

然后

<script type="text/javascript">
    $(function(){
        $('#collapsible').on('click', '[data-showhideid]', function(){
            $('#' + $(this).attr('data-showhideid')).toggle();
        });
    });
</script>

【讨论】：