c:forEach循环时，里面便签的点击事件的实现方法

本文链接：https://blog.csdn.net/tian_tian2/article/details/80897630

本文介绍使用c:forEach循环结合JavaScript实现点击dd标签展开与收起ul子元素的方法。提供两种实现方案，一种是纯JavaScript方法，另一种是在HTML中直接使用onclick属性。此外还介绍了如何阻止事件冒泡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

c:forEach循环时，点击dd标签时，下面的ul显示出来，再点击dd标签时，下面的ul隐藏

方法一：

//html中的代码
<c:forEach items="${street.listGrid}" var="community">
    <dd>
        <span  class="code">
            ▶&nbsp;${community.gdname}
            <span style="color:#666;font-size: 6px;">(${community.gridcode})</span>
        </span>
        <ul>
            <c:forEach items="${community.listGrid}" var="grid">
                <li>
                    <span class="code">${grid.gdname}
                        <span>(${grid.gridcode})</span>
                    </span>
                </li>
            </c:forEach>
        </ul>
    </dd>
 </c:forEach>

//js中的代码：
$("dl dd").click(function(){
    $(this).children('ul').toggle()
})

$("dl dd ul").click(function(){
    event.stopPropagation();
})

当click失效时，可以采取下面的方法
方法二：

//html中的代码
<c:forEach items="${street.listGrid}" var="community" varStatus="communityStatus">
    <dd onclick="showGrid(this.id)" id="community${communityStatus.index+1 }">
        <span  class="code">
            ▶&nbsp;${community.gdname}
            <span style="color:#666;font-size: 6px;">(${community.gridcode})</span>
                <ul>
                    <c:forEach items="${community.listGrid}" var="grid" varStatus="gridStatus">
                            <li onclick="noshow(this.id)" id="grid${gridStatus.index+1 }">
                                <span class="code">${grid.gdname}
                                    <span>(${grid.gridcode})</span></span>
                            </li>
                    </c:forEach>
                </ul>
        </span>
    </dd>
</c:forEach>

//js中的代码：
function showGrid(id){
    $("#"+id).children("ul").toggle();
}
function noshow(id){
    event.stopPropagation();
}