我正在嘗試在 boostrap 手風琴中顯示動態內容（動態自定義欄位）。為此，我使用 $var 來獲取我所在的 while 回圈的索引，并使用它來區分第一個元素并將第一個元素的“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; ?>
問題是，當頁面加載時，所有專案都會展開，如果我單擊同一元素兩次，所有其他元素都會折疊。
uj5u.com熱心網友回復：
您必須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; ?>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338762.html
標籤：javascript WordPress的 推特引导 坍塌
上一篇：如何在woocommerce的帳戶詳細資訊頁面中顯示自定義用戶注冊詳細資訊
下一篇：聯系表格7自動選項卡到下一個欄位