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

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

方法一:

//html中的代码
<c:forEach items="${street.listGrid}" var="community">
    <dd>
        <span  class="code">
            ▶ ${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">
            ▶ ${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();
}

注释:event.stopPropagation() 方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行。

你可能感兴趣的:(Java基础)