ACF 中继器手风琴与 Bootstrap 5

Question

我尝试使用 ACF 中继器字段通过 Bootstrap 5 和简单的问答字段构建 FAQ 手风琴。我正在打印结果，但手风琴扩展器会在单击时打开所有字段，而不仅仅是单击时的目标字段。如何调整 ID 以仅打开单击的字段？

当前代码

<?php elseif ( get_row_layout() == 'module__faq' ) : ?>

    <!-- Module: FAQ
    ================================================== -->
    <div class="section-interior-content bg-white py-5">

        <div class="container text-center text-md-start">

            <div class="row">

                <div class="col-12 col-lg-4 text-center text-md-start order-lg-first">

                    <h2 class="black">
                        Lorem ipsum 
                    </h2>

                </div>  
                
                <div class="col-12 col-lg-8 order-first">

                    <?php if ( have_rows( 'faq' ) ) : ?>
                    
                        <div class="accordion accordion-flush" id="faqlist">

                            <?php $i=1; while ( have_rows( 'faq' ) ) : the_row(); ?>
                            
                                <div class="accordion-item">
                                    
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-1">
                                            <?php the_sub_field( 'question' ); ?>
                                        </button>
                                    </h2>
                                
                                    <div id="faq-content-1" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                                        
                                        <div class="accordion-body px-4">
                                            <?php the_sub_field( 'answer' ); ?>
                                        </div>
                                    </div>

                                </div>

                            <?php endwhile; ?>

                        </div>

                    <?php else : ?>
                        <?php // no rows found ?>
                    <?php endif; ?>

                </div>

            </div>

        </div>

    </div>
    <!-- END Module: FAQ
    ================================================== -->

<?php endif; ?>

更新：解决方案

我通过为每个常见问题解答添加唯一的 id 字段，以最快的方式解决了这个问题 - 基于这篇文章：问题与 ACF 中继器折叠循环

Answer 1

我根据这篇文章为每个常见问题解答添加了唯一的 id 字段，以最快的方式解决了这个问题：Issue with ACF Repeater Accordeon Loop

Answer 2

” > “ aria-expanded =“假” aria-controls="flush-collapse"> “ class =“手风琴折叠折叠” aria-labelledby="flush-heading" data-bs-parent="#accordionFlushExample">