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

【问题标题】：Bootstrap accordion with dynamic php content具有动态 php 内容的 Bootstrap 手风琴
【发布时间】：2021-12-12 06:14:07
【问题描述】：

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

当执行此代码时，“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; ?>

问题是，当页面加载时，所有项目都被展开，如果我单击两次相同的元素，所有其他元素都会崩溃。

【问题讨论】：

从除第一个元素之外的其他元素中删除显示类。

标签： javascript wordpress twitter-bootstrap collapse

【解决方案1】：

您必须仅将show 类应用于第一个accordion-collapse 元素，因此您必须验证循环索引是否为0，然后再应用显示类。

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

【讨论】：