多个Bootstrap手风琴同时打开和关闭

debugcn 发表于 Dev

凯文

这是情况。我有一个手风琴，安装程序，问题是多个手风琴同时打开和关闭。

这是代码：

<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"，也许增加它们来增加手风琴计数。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。