Question

我一直试图将Accordeon Blocs集成到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 Bloc时，我有几个选项卡div，但是当我单击“ +”以显示选项卡内容的集团时，它总是显示第一个的内容，例如他们显然都属于同一班。

在构建循环之前，我没有想到该问题，也找不到解决方法。我对javascript的了解为零，但也许这里有解决方案？还是使用CSS并选择nth / nth + 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>

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

Answer 1

我认为这里的问题是容器（在这种情况下为<div class="tab">）缺少了position: relative属性，而各种input却一个接一个地结束了，因为position: absolute属性。

这是工作fiddle，但进行了以下更改：

.tab { position: relative; }

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

ACF中继器手风琴循环问题

1 个答案: