首页 > 解决方案 > bootstrap 手风琴和旋转木马在活动时显示和隐藏

问题描述

我有一个轮播,它连接到一个带有 ACF 转发器的 wordpress 站点,用于创建一系列标题、文本和图像。当滑块按顺序移动时,它会显示相关的标题和图像。

我的问题

我现在正试图让手风琴折叠或显示,具体取决于类是否处于活动状态,如您所见,我已尝试在下面的按钮中使用我的 php 进行设置,aria-expanded="<?php echo ($count) >= 1 ? '' : 'true'; ?>"但它似乎没有工作甚至改变当我运行该网站时为真。

有谁知道我做错了什么或如何解决这个问题?

感谢您

代码

      <?php
$repeater = get_field('section_8_slider');
$count = 0;
$section = "section_8_";
?>
<section class="pb-5">
    <div class="container">
        <div id="carousel_03" class="carousel slide" data-ride="carousel">
            <div class="row">
                <div class="col">
                    <div class="carousel-indicators tabs row">
                        <?php if (have_rows($section . 'slider')):
                            while (have_rows($section . 'slider')):
                                the_row(); ?>
                                <div id="accordion" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                                    <div class="card">
                                        <div data-target="#carousel_03" data-slide-to="<?php echo($count++); ?>" role="button" id="headingOne"
                                             class="carousel-indicator p-3">
                                            <h4 data-toggle="collapse" data-target="#collapseOne<?php echo($count++); ?>"
                                                aria-expanded="<?php echo ($count) >= 1 ? '' : 'true'; ?>"
                                                aria-controls="collapseOne"><?php the_sub_field('title', $post->ID) ?>
                                            </h4>
                                        </div>
                                        <div id="collapseOne<?php echo($count++); ?>" class="collapse aria-expanded= <?php echo ($count) >= 1 ? '' : 'show'; ?>"
                                             aria-labelledby="headingOne" data-parent="#accordion">
                                            <div class="card-body">
                                                <p class="small m-0">
                                                    text here <?php the_sub_field('text', $post->ID) ?>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endwhile;
                        endif; ?>
                    </div>
                </div>
                <div class="col">
                    <div class="carousel-inner">
                        <?php foreach ($repeater as $rowNumber => $row): ?>
                            <div class="carousel-item<?php if ($rowNumber === 0) : ?> active<?php endif ?>">
                                <img class="img-fluid w-100" src="<?= $row['image']['url'] ?>" alt="<?= $row['image']['alt'] ?>">
                            </div>
                        <?php endforeach ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

标签: phpwordpresstwitter-bootstrapcarouselaccordion

解决方案


推荐阅读