為什么當我在頁面中聲明超過 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>