Bootstrap 具有动态 php 内容的手风琴

Question

我正在尝试在 boostrap 手风琴中显示动态内容（动态自定义字段）。为此，我使用 $var 获取我所在的 while 循环的 de 索引，并使用它来区分第一个元素并将“aria-expanded”属性设置为“true”对于第一个元素，其余元素为“false”。

执行此代码时，“aria-expanded”属性的值为“true”，手风琴中的每个其他元素的值为“false”。

<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>
                <div id="<?php echo('collapse-'.$var)?>" class="accordion-collapse collapse 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; ?>

问题是，当页面加载时，所有项目都会展开，如果我点击同一个元素两次，所有其他元素都会折叠。

Answer 1

您必须仅将 show class 应用于第一个 accordion-collapse 元素，因此您必须验证循环索引为 0，然后应用 show class.

class="accordion-collapse collapse <?php if($var==0){echo ('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>
                <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; ?>

Bootstrap 具有动态 php 内容的手风琴

Bootstrap accordion with dynamic php content

javascript

wordpress

collapse

twitter-bootstrap