Question

我正在使用ACF中继器来创建图像/内容行，并在单击时显示/隐藏。在桌面屏幕上，每行3张图像，一切看起来都很好，单击图像时，隐藏的div会显示在下面，并且背景色会打开，因此您知道要查看的图像内容。

我的问题是，我试图在移动设备上获得相同的功能，但是当单击图像时，内容显示在第3格下。我想位于单击的图像下方。由于我使用的是ACF转发器，因此我的php脚本会先创建父div（跨3个），然后在下面创建隐藏的div。

我不介意为移动设备创建单独的html标记，只是无法弄清楚如何使其与ACF转发器一起使用。

<div class="staff">
<?php if (have_rows('staff_rows')):
while (have_rows('staff_rows')): the_row(); ?>
<div class="staff-wrap">
<div class="staff_images">        
<?php if (have_rows('staff_images')):
while (have_rows('staff_images')): the_row(); ?>
<a href="#/" class="<?php the_sub_field('staff_class'); ?> show staff-box"> 
<img src="<?php the_sub_field('staff_image'); ?>"><div class="image-box"><h3> 
<?php the_sub_field('staff_name'); ?></h3>
     <h3><?php the_sub_field('staff_position'); ?></h3></div>
  </a>

 <?php endwhile;
 endif; ?>
<?php if (have_rows('staff_bios')):
 while (have_rows('staff_bios')): the_row(); ?>
 <div class="bios">
<div class="wrap">
<div class="<?php the_sub_field('bio_class'); ?> row"><?php 
the_sub_field('bio_text'); ?></div>
</div>
</div>
<?php endwhile;
endif; ?>
</div>

http://toolboxdevmachine.com/TechNiche/about-us

感谢您的帮助

Answer 1

我猜您已经在2019年弄清楚了这一点。您似乎缺少了几个关闭的<div>标签，以及结束了while循环和主要条件。我破解了代码，缩进了代码，并使用正确的结束标记编写了该代码：

<div class="staff">
  <?php if (have_rows('staff_rows')):
    while (have_rows('staff_rows')): the_row(); ?>
      <div class="staff-wrap">
        <div class="staff_images">        
          <?php if (have_rows('staff_images')):
            while (have_rows('staff_images')): the_row(); ?>
              <a href="#/" class="<?php the_sub_field('staff_class'); ?> show staff-box"> 
                <img src="<?php the_sub_field('staff_image'); ?>">
                <div class="image-box">
                  <h3><?php the_sub_field('staff_name'); ?></h3>
                  <h3><?php the_sub_field('staff_position'); ?></h3>
                </div>
              </a>
            <?php endwhile;
          endif; ?>
          <?php if (have_rows('staff_bios')):
            while (have_rows('staff_bios')): the_row(); ?>
            <div class="bios">
              <div class="wrap">
                <div class="<?php the_sub_field('bio_class'); ?> row">
                  <?php the_sub_field('bio_text'); ?>
                </div>
              </div>
            </div>
          <?php endwhile;
        endif; ?>
      </div>
    </div>
  <?php endwhile; ?>
<?php endif; ?>

在移动设备上切换显示/隐藏配置-ACF转发器

1 个答案: