ACF 中继器手风琴循环问题答案

【问题标题】：Issue with ACF repeater accordeon loopACF 中继器手风琴循环问题
【发布时间】：2018-07-27 20:39:23
【问题描述】：

我一直在尝试将手风琴块集成到 ACF 循环中：

<?php elseif ( get_row_layout() == 'accordeon' ) : ?>
    <?php if ( have_rows( 'cases' ) ) : ?>
        <div class="accordeon-bloc clear">
            <?php while ( have_rows( 'cases' ) ) : the_row(); ?>
                <div class="tab">
                    <input id="tab" type="checkbox" name="tabs">
                    <label for="tab"><?php the_sub_field( 'titre_du_bloc' ); ?></label>
                    <div class="tab-title"><?php the_sub_field( 'label' ); ?></div>
                    <div class="tab-content">
                        <p><?php the_sub_field( 'descriptif' ); ?></p>
                    </div>
                </div>
            <?php endwhile; ?>
        </div>
    <?php else : ?>
        <?php // no rows found ?>
    <?php endif; ?>

这里是 CSS：

input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.tab-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s;
}

/* :checked */
.tab input:checked ~ .tab-content {max-height: 10em;}

所以这是我的问题：当我添加多个手风琴块时，我有几个选项卡 div，但是当我单击“+”以显示选项卡内容块时，它总是显示第一个的内容，如他们显然都有相同的类。

在构建循环之前我没有想到这个问题，我不知道如何解决这个问题。我对 javascript 的了解为零，但也许这里有解决方案？或者使用 CSS 并选择第 n 个/第 n + 1 个元素？

提前感谢您的帮助！

编辑：我通过在 ADF 中添加 ID 字段并修改循环找到了解决方案：

<div class="tab">
    <input id="<?php the_sub_field( 'identifiant' ); ?>" type="checkbox" name="tabs">
    <label for="<?php the_sub_field( 'identifiant' ); ?>"><?php the_sub_field( 'icone' ); ?><?php the_sub_field( 'titre_du_bloc' ); ?></label>
    <div class="tab-title"><?php the_sub_field( 'label' ); ?></div>
    <div class="tab-content">
        <p><?php the_sub_field( 'descriptif' ); ?></p>
    </div>
</div>

但也许有更好的解决方案，不需要手动输入！

【问题讨论】：

能不能加个你现在用的js来显示内容？
没有 JS，因为手风琴是纯 CSS
你应该可以在不使用特定id输入的情况下实现它，检查答案

标签： wordpress loops repeater advanced-custom-fields

【解决方案1】：

我认为这里的问题是容器（在这种情况下为<div class="tab">）缺少position: relative 属性，并且由于position: absolute 属性，各种input 最终一个在另一个之上。

这是一个有效的fiddle，具有以下更改：

.tab { position: relative; }

.tab input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}

【讨论】：