php - 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>
解决方案
推荐阅读
- python - Getting pyplot NOT to plot nan values
- msbuild - 在 MSBuild 中构建所有项目后执行 XCopy 操作
- c# - MongoDB c# driver - ForEachAsync vs ToListAsync
- html - 空白:nowrap;css 样式不允许表格响应
- html - HTML5 border not fitting in to margin-right
- java - 在 apache kafka 主题上流式传输没有输出
- javascript - 带有昵称和头像的公会成员更新日志频道
- java - 如何在 Spring 运行时关闭接收器 bean
- c++ - 指向 C++ 寄存器的指针是否合法?
- r - 将“Ymw”转换为日期 - 一周的第一个星期一