为什么当我在页面中声明超过1个单独的引导手风琴(面板-组元素)时，我获得了与opencollapse相关的错误行为

Why when I declare more than 1 separate BootStrap accordion (panel-group element) in a page I obtain this wrong behavior related to the opencollapse?

本文关键字：元素 -组 获得了 opencollapse 错误 面板 手风琴 声明 为什么 单独 1个      更新时间：2023-09-26

我是Twitter BootStrap的新手，我发现在JSP页面中获取特定行为有些困难。

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

在JSP页面中，我必须迭代包含一些对象的List，并且对于该列表的每个对象，我必须创建一个手风琴(使用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迭代)并获得所需的行为?

您有多个具有相同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>
相关文章：