先进的定制领域，灵活的内容与多重启动带折叠(手风琴)

Question

我使用ACF灵活的内容，允许多个手风琴在同一个页面上。我的问题是计数整数。随着每一个新手风琴，它开始计数部分(‘#折叠-#’)再次。我不太精通PHP。

我的代码返回如下：

手风琴1

• 塌陷1
• 塌陷2
• 崩塌3

手风琴2

• 塌陷1
• 塌陷2
• 崩塌3

但是，我需要它打印这个：

手风琴1

• 塌陷1
• 塌陷2
• 崩塌3

手风琴2

• 崩塌4
• 塌陷5
• 塌陷6

到目前为止我的代码是：

<?php if( have_rows('content') ): ?>
<?php $j=1; while ( have_rows('content') ) : the_row(); ?>
<?php if( get_row_layout() == 'accordion' ): ?>
<?php if( have_rows('sections') ): ?>

<div class="panel-group" id="accordion-<?php echo $j; ?>" role="tablist" aria-multiselectable="true">
<?php $i=1; while ( have_rows('sections') ) : the_row(); ?>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-<?php echo $i; ?>">
<h2 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-<?php echo $j; ?>" href="#collapse-<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne">
<?php the_sub_field('question'); ?>
</a>
</h2>
</div>

<div id="collapse-<?php echo $i; ?>" class="panel-collapse collapse <?php if ($i==1) { echo 'in'; } ?>" role="tabpanel" aria-labelledby="heading-<?php echo $i; ?>">
 <div class="panel-body">
 <?php the_sub_field('answer'); ?>
</div>
</div>
</div>

<?php $i++; endwhile; ?>
</div>
<?php endif; ?>
<?php endif; ?>
<?php $j++; endwhile; ?>
<?php else : endif; ?>

Answer 1

我想出了一个基于Kalen的存储库的解决方案。

<?php if( have_rows('content') ): ?>

<?php $j=1; while ( have_rows('content') ) : the_row(); ?>

<?php if( get_row_layout() == 'accordion' ): ?>

<?php if( have_rows('sections') ): ?>

<div class="panel-group" id="accordion-<?php echo $j; ?>" role="tablist" aria-multiselectable="true">

<?php $i=1; while ( have_rows('sections') ) : the_row(); ?>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-<?php echo $i; ?>">
<h2 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-<?php echo $j; ?>" href="#collapse-<?php echo $j; ?>-<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne">
<?php the_sub_field('question'); ?>
</a>
</h2>
</div>

<div id="collapse-<?php echo $j; ?>-<?php echo $i; ?>" class="panel-collapse collapse <?php if ($i==1) { echo 'in'; } ?>" role="tabpanel" aria-labelledby="heading-<?php echo $i; ?>">
<div class="panel-body">
<?php the_sub_field('answer'); ?>
</div>
</div>

</div>
<?php $i++; endwhile; ?>
</div>

<?php endif; ?>
<?php endif; ?>

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

<?php else : endif; ?>

Answer 2

我用"uniqid“来完成这个任务。

https://codepen.io/herrfischer/pen/yqrZzm

在这种情况下，我的手风琴是一个中继器在一个灵活的领域。

这样，每个手风琴都有一个统一的ID：

<?php
   // get flexible field
   if ( get_row_layout() == 'columns_row_row_accordion'): ?>

   <?php 
   // create uniqe ID
   $Acc_ID = uniqid(); ?>

   <?php 
   // get repeater
   if( have_rows('accordion_zeile') ) : ?>

   <div id="accordion_<?php echo $Acc_ID; ?>">
   <?php while ( have_rows('accordion_zeile') ) : the_row(); ?>

   ...

Bootstrap 4示例：

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <section class="col-12 __ column column_h2">
    <div class="col_inner txt">
      <h2>First Accordion</h2>
    </div>
  </section>


  <section class="column column_accordion __ col-12">
    <div id="accordion_5d7a6419bb876">

      <div class="card">
        <div class="card-header" id="heading_1_5d7a6419bb876">
          <h4 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse_1_5d7a6419bb876" aria-expanded="false" aria-controls="collapse_1_5d7a6419bb876">
							111						</button>
          </h4>
        </div>

        <div id="collapse_1_5d7a6419bb876" class="collapse" aria-labelledby="heading_1_5d7a6419bb876" data-parent="#accordion_5d7a6419bb876" style="">
          <div class="card-body">
            <p>Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Suspendisse potenti. Praesent egestas neque eu enim. Fusce convallis metus
              id felis luctus adipiscing.</p>
          </div>
        </div>
      </div>


      <div class="card">
        <div class="card-header" id="heading_2_5d7a6419bb876">
          <h4 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse_2_5d7a6419bb876" aria-expanded="true" aria-controls="collapse_2_5d7a6419bb876">
							222						</button>
          </h4>
        </div>

        <div id="collapse_2_5d7a6419bb876" class="collapse" aria-labelledby="heading_2_5d7a6419bb876" data-parent="#accordion_5d7a6419bb876">
          <div class="card-body">
            <p>Pellentesque dapibus hendrerit tortor. Phasellus nec sem in justo pellentesque facilisis. Etiam sit amet orci eget eros faucibus tincidunt. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Praesent metus tellus, elementum
              eu, semper a, adipiscing nec, purus.</p>
          </div>
        </div>
      </div>


      <div class="card">
        <div class="card-header" id="heading_3_5d7a6419bb876">
          <h4 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse_3_5d7a6419bb876" aria-expanded="true" aria-controls="collapse_3_5d7a6419bb876">
							333						</button>
          </h4>
        </div>

        <div id="collapse_3_5d7a6419bb876" class="collapse" aria-labelledby="heading_3_5d7a6419bb876" data-parent="#accordion_5d7a6419bb876">
          <div class="card-body">
            <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Quisque rutrum. Aenean commodo ligula eget dolor. Phasellus dolor. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.</p>
          </div>
        </div>
      </div>

    </div>
  </section>






  <section class="col-12 __ column column_h2">
    <div class="col_inner txt">
      <h2>Another Accordion</h2>
    </div>
  </section>

  <section class="column column_accordion __ col-12">
    <div id="accordion_5d7a6419bbd35">

      <div class="card">
        <div class="card-header" id="heading_1_5d7a6419bbd35">
          <h4 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse_1_5d7a6419bbd35" aria-expanded="false" aria-controls="collapse_1_5d7a6419bbd35">
							111						</button>
          </h4>
        </div>

        <div id="collapse_1_5d7a6419bbd35" class="collapse" aria-labelledby="heading_1_5d7a6419bbd35" data-parent="#accordion_5d7a6419bbd35" style="">
          <div class="card-body">
            <p>Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nonummy mi in odio. In turpis. Duis leo.</p>
          </div>
        </div>
      </div>


      <div class="card">
        <div class="card-header" id="heading_2_5d7a6419bbd35">
          <h4 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse_2_5d7a6419bbd35" aria-expanded="true" aria-controls="collapse_2_5d7a6419bbd35">
							222						</button>
          </h4>
        </div>

        <div id="collapse_2_5d7a6419bbd35" class="collapse" aria-labelledby="heading_2_5d7a6419bbd35" data-parent="#accordion_5d7a6419bbd35">
          <div class="card-body">
            <p>Nullam accumsan lorem in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ultricies nisi vel augue. Fusce neque. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
          </div>
        </div>
      </div>

    </div>
  </section>






</div>

​