为什么当我在页面中声明超过 1 个单独的 BootStrap 手风琴（面板组元素）时，我会获得与打开\\折叠相关的错误行为？

Question

我是 Twitter BootStrap 的新手，我发现很难将特定行为获取到 JSP 页面中。

我试着解释我必须做什么：

在 JSP 页面中，我必须迭代包含某个对象的列表，并且对于该列表的每个对象，我必须创建一个手风琴（使用 BootStrap panel-group元素）。

通过这种方式，我获得了 n 个打开的手风琴（其中 n 是我列表中的对象数）。

这是代码：

<section>
    <div class="container alignLeft">
        <c:forEach items="${listaScuoleDS}" var="scuola">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">


            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" href='<c:out value="${scuola.id.codScuUt}"/>'>
                          Collapsible Group Item #1
                        </a>
                    </h4>
                </div>

                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>

        </div>
        </c:forEach>
    </div>
</section>

这是一个 JSFiddle，其中我已将呈现的输出放入浏览器：

https://jsfiddle.net/AndreaNobili/hkbLphqm/1/

如您所见，将代码运行到 JSFiddle 中，问题是当我单击第二个手风琴的标题时，第一个手风琴折叠了，这是错误的，因为必须折叠第二个手风琴。

我认为这个问题与某些标签的 id 之类的东西有关，因为单击第二个手风琴的标题会与第一个交互。 我尝试更改 ID，但似乎无法正常工作。

我错过了什么？ 如何修改JSFiddle代码（然后我自己将其改成JSP迭代）并获得所需的行为？

Answer 1

您有多个具有相同id元素。 id属性必须是唯一的。

一种选择是给它们编号。

对于第一个手风琴：

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
<!-- -->
<div class="panel-heading" role="tab" id="headingOne1">
<!-- -->
<div id="collapseOne1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

对于第二手风琴：

<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<!-- -->
<div class="panel-heading" role="tab" id="headingOne2">
<!-- -->
<div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

等等。

要让这些索引在您的 jsp 中工作，请使用varStatus ：

<c:forEach items="${listaScuoleDS}" var="scuola" varStatus="item">
    <div class="panel-group" id="accordion_${item.index}" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne_${item.index}">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" href="#collapseOne_${item.index}"/>'>
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>

            <div id="collapseOne_${item.index}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
    </div>
</c:forEach>