如何在wordpress中打開第一個手風琴（FAQ）并關閉其余部分

我創建了動態常見問題解答插件，并且運行良好。但是我有一個問題，即如何使用引導類打開第一個手風琴選項卡show，然后使用 WordPressthe_ID();功能關閉其余選項卡。

<?php
    $mypost = array( 'post_type' => 'faqs', );
    $loop = new WP_Query( $mypost );
    ?>
   <?php while ( $loop->have_posts() ) : $loop->the_post();?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <div class="accordion" id="accordionPanelsStayOpenExample">
          <div class="accordion-item">
            <h2 class="accordion-header" id="panelsStayOpen-<?php the_ID(); ?>">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse<?php the_ID(); ?>" aria-expanded="true" aria-controls="panelsStayOpen-collapse<?php the_ID(); ?>">
              <?php the_title(); ?>
              </button>
            </h2>
            <div id="panelsStayOpen-collapse<?php the_ID(); ?>" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-<?php the_ID(); ?>">
              <div class="accordion-body">
                <strong><?php the_content(); ?>
              </div>
            </div>
          </div>
        </div>
        </article>
 
    <?php endwhile; ?>
    </div>
</div>
<?php wp_reset_query(); ?>

所以第一個標簽應該總是

 <div id="panelsStayOpen-collapse<?php the_ID(); ?>" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-<?php the_ID(); ?>">

其余的

 <div id="panelsStayOpen-collapse<?php the_ID(); ?>" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-<?php the_ID(); ?>">

uj5u.com熱心網友回復：

一個問題是您的<div ...>商品需要唯一的 ID，如下所示：

<div class="accordion" id="accordionPanelsStayOpenExample-<?php the_ID(); ?>">

但是對于您的主要觀點：以編程方式使第一個面板具有“折疊顯示”類，而隨后的面板具有“折疊”類，請通過計數器跟蹤您要處理的面板（在我的情況下$i）并有選擇地在除第一個之外的所有內容上添加“顯示”：

<div id="panelsStayOpen-collapse<?php the_ID(); ?>" class="accordion-collapse collapse <?php if ($i  ) { ?>show<?php } ?>" aria-labelledby="panelsStayOpen-<?php the_ID(); ?>">

因此，您的整個代碼將變為：

<?php
    $mypost = array( 'post_type' => 'faqs', );
    $loop = new WP_Query( $mypost );
    $i = 0;
    ?>
   <?php while ( $loop->have_posts() ) : $loop->the_post();?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <div class="accordion" id="accordionPanelsStayOpenExample-<?php the_ID(); ?>">
          <div class="accordion-item">
            <h2 class="accordion-header" id="panelsStayOpen-<?php the_ID(); ?>">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse<?php the_ID(); ?>" aria-expanded="true" aria-controls="panelsStayOpen-collapse<?php the_ID(); ?>">
              <?php the_title(); ?>
              </button>
            </h2>
            <div id="panelsStayOpen-collapse<?php the_ID(); ?>" class="accordion-collapse collapse <?php if ($i  ) { ?>show<?php } ?>" aria-labelledby="panelsStayOpen-<?php the_ID(); ?>">
              <div hljs-string">">
                <strong><?php the_content(); ?>
              </div>
            </div>
          </div>
        </div>
        </article>
 
    <?php endwhile; ?>
    </div>
</div>
<?php wp_reset_query(); ?>

標籤：phpWordPress推特引导

上一篇：如何使用jQuery從元素中洗掉特定文本

下一篇：在產品創建上添加購買備注元-WooCommerce