ACF中继器手风琴环路问题 [英] Issue with ACF repeater accordeon loop

问题描述

我一直在尝试在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;}

所以我的问题是：当我添加多个Accordeon块时，我有几个制表符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>

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

推荐答案

我认为这里的问题在于容器(在本例中为<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;
}

这篇关于ACF中继器手风琴环路问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！