如何在wordpress中打开第一个手风琴(FAQ)，关闭其余手风琴

Question

我已经创建了动态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(); ?>">

Answer 1

一个问题是您的<div class="accordion"...>项目需要唯一的ID，如下所示：

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

但你的要点是：通过编程使第一个面板具有一个类"；崩溃秀；并且随后的一个具有一个仅为"0"的类；"塌陷"；，通过计数器(在我的情况下是$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 class="accordion-body">
<strong><?php the_content(); ?>
</div>
</div>
</div>
</div>
</article>

<?php endwhile; ?>
</div>
</div>
<?php wp_reset_query(); ?>