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

在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

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

1 个答案: