Question

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

我有一个Map > dataMap，我想使Map中的所有条目都可折叠，并且使每个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>

我可以通过执行以下操作来分配唯一的部分/按钮ID：“ mainSection + mainIndex”和“ childSection + childIndex”，但不确定如何为此编写点击功能。

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

Answer 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>

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

1 个答案: