使用 Collapse 在手风琴上一次打开一个面板

Question

这个问题似乎已经被问过一百万次 bootstrap 3，但是，我找不到任何关于可折叠 card 的东西，更不用说它在 PHP 循环。

我正在遍历高级自定义字段转发器并将结果输出到可折叠卡片中。

除了打开另一张卡片时我无法让手风琴关闭其他卡片外，一切正常。一次只能打开一个。

<?php
  // check if the repeater field has rows of data
  if( have_rows('video_accordion') ): ?>
    <div id="accordion"  class="col-sm-12" role="tablist" aria-multiselectable="false">
      <?php $index = 0; ?>
    <?php   // loop through the rows of data
      while ( have_rows('video_accordion') ) : the_row(); ?>

      <div class="card">

        <a data-toggle="collapse" class="<?php if($index != 0): echo 'collapsed'; else : endif; ?>" data-parent="#accordion" href="#collapse<?php echo $index; ?>" aria-expanded="false" aria-controls="collapse<?php echo $index; ?>">
          <div class="card-header" role="tab" id="heading<?php echo $index; ?>">
              <?php the_sub_field('video_title'); ?>
          </div>
        </a>

        <div id="collapse<?php echo $index; ?>" class="collapse show <?php if($index == 0): echo 'in'; else : endif; ?>" role="tabpanel" aria-labelledby="heading<?php echo $index; ?>">
          <div class="card-block">
            <iframe src="https://player.vimeo.com/video/<?php the_sub_field('video_id'); ?>" width="640" height="288" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
          </div>
        </div>

      </div>

    <?php $index ++ ?>
  <?php endwhile; ?>

编辑

HTML 只是请求的例子

<div id="accordion"  class="col-sm-12" role="tablist" aria-multiselectable="false">
  <div class="card">
    <a data-toggle="collapse" class="" data-parent="#accordion" href="#collapse_1" aria-expanded="false" aria-controls="collapse">
      <div class="card-header" role="tab" id="heading">
          title 1
      </div>
    </a>

    <div id="collapse_1" class="collapse show" role="tabpanel" aria-labelledby="heading">
      <div class="card-block">
        <iframe src="https://player.vimeo.com/video/203710832" width="640" height="288" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>
    </div>

    <div class="card">
      <a data-toggle="collapse" class="" data-parent="#accordion" href="#collapse_2" aria-expanded="false" aria-controls="collapse">
        <div class="card-header" role="tab" id="heading">
            Title 2
        </div>
      </a>

      <div id="collapse_2" class="collapse show" role="tabpanel" aria-labelledby="heading">
        <div class="card-block">
          <iframe src="https://player.vimeo.com/video/203710832" width="640" height="288" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
      </div>

  </div>
</div> <!-- end of accordion -->

即使粘贴 this example 也会产生相同的行为。

非常感谢

Answer 1

在Bootstrap4中，.collapse.in被.collapse.show代替。

您需要删除所有 class="collapse show"，并将它们更改为 class="collapse"。在 php 代码中添加 show 属性，而不是 in。

<div id="accordion" class="col-sm-12" role="tablist" aria-multiselectable="false">
            <div class="card">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
                  <div class="card-header" role="tab" id="heading1">
                      title
                  </div>
                </a>
                <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1">
                    <div class="card-block">
                        block
                    </div>
                </div>
            </div>
            <div class="card">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
                  <div class="card-header" role="tab" id="heading2">
                      title
                  </div>
                </a>
                <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="heading2">
                    <div class="card-block">
                        block
                    </div>
                </div>
            </div>
            <div class="card">
                <a data-toggle="collapse"  data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
                  <div class="card-header" role="tab" id="heading3">
                      title
                  </div>
                </a>
                <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="heading3">
                    <div class="card-block">
                        block
                    </div>
                </div>
            </div>
        </div>

演示：http://www.codeply.com/go/XEcJ5SZ4wN

使用 Collapse 在手风琴上一次打开一个面板

One panel open at a time on accordion using Collapse

javascript

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4