使用“折疊”一次打開一個手風琴面板

Question

似乎對於引導程序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 -->

即使粘貼此示例也會產生相同的行為。

非常感謝

Answer 1

在Bootstrap 4中， .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