Bootstrap手风琴嵌入PHP动态自定义字段时全部展开异常问题

问题原因 #

所有手风琴的折叠容器都固定添加了show类，Bootstrap中show类是控制手风琴项默认展开的核心样式类，你仅调整了按钮的aria-expanded属性，没有同步控制show类的输出逻辑，因此页面加载时所有项都被标记为展开状态。第一次点击手风琴项时Bootstrap会先同步属性和类的匹配状态，第二次点击才会触发正常的折叠逻辑，才会出现你描述的异常表现。

修复方案 #

修改.accordion-collapse元素的class属性，动态判断循环索引，仅首个元素添加show类，其余元素不添加。

修复后代码如下：

<div class="accordion faqs" id="accordionExample-b">
<?php if( have_rows('preguntas') ): ?>
    <?php 
        $var = 0;
        while( have_rows('preguntas') ): the_row(); ?>
            <div class="accordion-item">
                <h2 class="" id="<?php echo('heading-'.$var)?>">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="<?php echo('#collapse-'.$var)?>" 
                        aria-expanded="<?php if($var==0):echo ('true'); else: echo ('false'); endif;?>" aria-controls="<?php echo('collapse-'.$var)?>">
                        <h3><?php the_sub_field('pregunta'); ?></h3>
                    </button>
                </h2>
                <!-- 仅首个折叠项加show类 -->
                <div id="<?php echo('collapse-'.$var)?>" class="accordion-collapse collapse <?php if($var==0) echo 'show'; ?>" aria-labelledby="<?php echo('heading-'.$var)?>" data-bs-parent="#accordionExample-b">
                    <div class="">
                        <?php the_sub_field('respuesta'); ?>
                    </div>
                </div>
            </div>
    <?php $var++; endwhile; ?>
<?php endif; ?>

内容的提问来源于stack exchange，提问作者udiskie