我使用ACF灵活内容在同一页面上允许多个手风琴。对我来说问题是计数整数。每次使用新的手风琴时，它都会重新计算各个部分（＆＃39; #collapse - ＃＆＃39;）。我不太懂PHP。
我的代码正在返回：
手风琴1
手风琴2
但是，我需要它来打印这个：
手风琴1
手风琴2
到目前为止我的代码：
<?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; ?>
答案 0 :(得分：0)
我找到了一个基于Kalen Johnson repo的解决方案。
<?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; ?>
答案 1 :(得分：0)
我用“ 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>