javascript - 为什么当我在页面中声明超过 1 个单独的 BootStrap Accordion (面板组元素)时，我会出现与打开\折叠相关的错误行为？

Question

我对 Twitter BootStrap 还很陌生，我发现在 JSP 页面中获取特定行为有些困难。

我尝试解释我必须做什么:

在 JSP 页面中，我必须迭代包含某个对象的列表，并且对于该列表中的每个对象，我必须创建一个单独的折叠面板(使用 BootStrap panel-group 元素)。

通过这种方式，我获得了 n 个打开的 Accordion (其中 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 中，问题是当我单击第二个 Accordion 的标题时，第一个 Accordion 折叠起来，这是错误的，因为必须折叠第二个 Accordion 。

我认为问题与某些标签的 id 之类的内容有关，因为单击第二个 Accordion 的标题会与第一个 Accordion 交互。我尝试更改 id 但似乎无法工作。

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

Answer 1

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

一个选择是给它们编号。

对于第一个 Accordion :

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

对于第二个 Accordion :

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