多个 Bootstrap 手风琴同时打开和关闭
Multiple Bootstrap accordion are opening and closing at the same time
情况是这样的。我有一个手风琴,设置问题是多个手风琴同时打开和关闭。
代码如下:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php $x = 0; ?>
<?php foreach ($testFaqs as $faqs) { ?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-<?php echo $x; ?>">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $x; ?>" aria-expanded="true" aria-controls="collapse-<?php echo $x; ?>">
<?php echo $faqs['name']; ?>
</a>
</h4>
</div>
<div id="collapse-<?php echo $x; ?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-<?php echo $x; ?>">
<div class="panel-body">
<?php if ($faqs['videoUrl'] != '' ) { ?>
<iframe align="center" class="youtube" src="https://www.youtube.com/embed/<?php echo $faqs['videoUrl']?>"> </iframe>
<?php } ?>
<?php echo htmlspecialchars_decode(($faqs['answer'])); ?>
</div>
</div>
</div>
<?php $x++; } ?>
</div>
如有任何帮助,我们将不胜感激。
谢谢,
凯文·戴维斯
您可以使用最新的 Bootstrap 4 手风琴。更多信息请点击这里 https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="heading-1">
<h2>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
111
</button>
</h2>
</div>
<div id="collapse-1" class="collapse show" aria-labelledby="heading-1" data-parent="#accordionExample">
<div class="card-body">
111
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-2">
<h2>
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
222
</button>
</h2>
</div>
<div id="collapse-2" class="collapse" aria-labelledby="heading-2" data-parent="#accordionExample">
<div class="card-body">
222
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-3">
<h2>
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
333
</button>
</h2>
</div>
<div id="collapse-3" class="collapse" aria-labelledby="heading-3" data-parent="#accordionExample">
<div class="card-body">
333
</div>
</div>
</div>
</div>
因此您的代码将是
<div class="accordion" id="accordionExample">
<?php $x = 0; ?>
<?php foreach ($testFaqs as $faqs) { ?>
<div class="card">
<div class="card-header" id="heading-<?php echo $x; ?>">
<h2>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-<?php echo $x; ?>" aria-expanded="true" aria-controls="collapse-<?php echo $x; ?>">
<?php echo $faqs['name']; ?>
</button>
</h2>
</div>
<div id="collapse-<?php echo $x; ?>" class="collapse<?php if ($x == 0) { ?> show<?php } ?>" aria-labelledby="heading-<?php echo $x; ?>" data-parent="#accordionExample">
<div class="card-body">
<?php if ($faqs['videoUrl'] != '' ) { ?>
<iframe align="center" class="youtube" src="https://www.youtube.com/embed/<?php echo $faqs['videoUrl']?>"></iframe>
<?php } ?>
<?php echo htmlspecialchars_decode(($faqs['answer'])); ?>
</div>
</div>
</div>
<?php $x++; } ?>
</div>
为要打开的第一个盒子添加了这个class="collapse<?php if ($x == 0) { ?> show<?php } ?>"
。
如果您在一页上有不止一个手风琴 - 不要忘记更改 id="accordionExample"
和 data-parent="#accordionExample"
,也许可以通过添加它们来计算手风琴的增量。
情况是这样的。我有一个手风琴,设置问题是多个手风琴同时打开和关闭。
代码如下:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php $x = 0; ?>
<?php foreach ($testFaqs as $faqs) { ?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-<?php echo $x; ?>">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $x; ?>" aria-expanded="true" aria-controls="collapse-<?php echo $x; ?>">
<?php echo $faqs['name']; ?>
</a>
</h4>
</div>
<div id="collapse-<?php echo $x; ?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-<?php echo $x; ?>">
<div class="panel-body">
<?php if ($faqs['videoUrl'] != '' ) { ?>
<iframe align="center" class="youtube" src="https://www.youtube.com/embed/<?php echo $faqs['videoUrl']?>"> </iframe>
<?php } ?>
<?php echo htmlspecialchars_decode(($faqs['answer'])); ?>
</div>
</div>
</div>
<?php $x++; } ?>
</div>
如有任何帮助,我们将不胜感激。
谢谢, 凯文·戴维斯
您可以使用最新的 Bootstrap 4 手风琴。更多信息请点击这里 https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="heading-1">
<h2>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
111
</button>
</h2>
</div>
<div id="collapse-1" class="collapse show" aria-labelledby="heading-1" data-parent="#accordionExample">
<div class="card-body">
111
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-2">
<h2>
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
222
</button>
</h2>
</div>
<div id="collapse-2" class="collapse" aria-labelledby="heading-2" data-parent="#accordionExample">
<div class="card-body">
222
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-3">
<h2>
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
333
</button>
</h2>
</div>
<div id="collapse-3" class="collapse" aria-labelledby="heading-3" data-parent="#accordionExample">
<div class="card-body">
333
</div>
</div>
</div>
</div>
因此您的代码将是
<div class="accordion" id="accordionExample">
<?php $x = 0; ?>
<?php foreach ($testFaqs as $faqs) { ?>
<div class="card">
<div class="card-header" id="heading-<?php echo $x; ?>">
<h2>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-<?php echo $x; ?>" aria-expanded="true" aria-controls="collapse-<?php echo $x; ?>">
<?php echo $faqs['name']; ?>
</button>
</h2>
</div>
<div id="collapse-<?php echo $x; ?>" class="collapse<?php if ($x == 0) { ?> show<?php } ?>" aria-labelledby="heading-<?php echo $x; ?>" data-parent="#accordionExample">
<div class="card-body">
<?php if ($faqs['videoUrl'] != '' ) { ?>
<iframe align="center" class="youtube" src="https://www.youtube.com/embed/<?php echo $faqs['videoUrl']?>"></iframe>
<?php } ?>
<?php echo htmlspecialchars_decode(($faqs['answer'])); ?>
</div>
</div>
</div>
<?php $x++; } ?>
</div>
为要打开的第一个盒子添加了这个class="collapse<?php if ($x == 0) { ?> show<?php } ?>"
。
如果您在一页上有不止一个手风琴 - 不要忘记更改 id="accordionExample"
和 data-parent="#accordionExample"
,也许可以通过添加它们来计算手风琴的增量。