Question

我正在尝试使用展开/折叠创建手风琴/面板。模型中的所有数据都正确打印，我得到的唯一问题是第一项的折叠/展开工作。如何为每个项目实施它？

我的代码：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

    <?php
    $html_ret = '

    <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="false" aria-controls=".collapse">
                    <b>%s</b> (%s)
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                %s
            </div>
        </div>
    </div>';

    foreach($arr_table_content as $row)
    {
        echo sprintf($html_ret, $row['TrainingName'],$row['TrType'],$row['Tr_description']);
    }
    ?>

</div>

感谢您提出任何建议

Answer 1

我相信您的问题来自于所有小组标题都具有相同的id="headingOne"。尝试在foreach循环中设置动态ID（同样适用于panel-collapse）

Answer 2

因为其余面板与第一个面板#collapseOne具有相同的ID，请尝试使用id来合并增量编号，例如：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

    <?php
    $html_ret = '

    <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%u" aria-expanded="false" aria-controls=".collapse">
                    <b>%s</b> (%s)
                </a>
            </h4>
        </div>
        <div id="collapseOne%u" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                %s
            </div>
        </div>
    </div>';

    $counter = 1;
    foreach($arr_table_content as $row)
    {
        echo sprintf($html_ret,$counter,$row['TrainingName'],$row['TrType'],$counter,$row['Tr_description']);
        $counter++;
    }
    ?>

</div>

展开/折叠仅适用于第一个项目

2 个答案: