dongou3158 2018-07-20 13:30
浏览 103

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

I am using the ACF Repeater to create rows of images/content and to show/hide when clicked. Everything looks good on desktop screens, with a row of 3 images, when an image is clicked, the hidden div shows up below and the background color toggles on so you know which image's content you are looking at.

My problem, is I am trying to get the same functionality on mobile, but when an image is clicked, the content shows up under the 3rd div. I want to be below the image that was clicked. Since I am using the ACF repeater, my php script creates the parent div (3 across) first and then the hidden divs below.

I don't mind creating a separate html markup for mobile, I just can't figure out how to make it work with the ACF repeater.

<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

Thanks for your help

  • 写回答

1条回答 默认 最新

  • doubei2340 2019-02-06 20:49
    关注

    I'm guessing you've already figured this out by now, in 2019. It looks like you are missing a few closing <div> tags, as well as ending your while loop and the primary conditional. I broke out the code, indented it and wrote it with the correct closing tags:

    <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; ?>
    
    评论

报告相同问题?

悬赏问题

  • ¥15 C# iMobileDevice
  • ¥15 谁会做这个啊#ensp#Boson NetSim
  • ¥15 如何编写针对TPS6503320FRGE型号的电源管理芯片的编程代码?
  • ¥15 设计简单目录管理系统,要满足以下内容
  • ¥15 关于九十度混合耦合器信号分析问题
  • ¥15 Cesm如何关闭不用的模块呢
  • ¥15 vue2两层数据导出为excle
  • ¥15 有人能帮我做一下这个项目吗
  • ¥15 网络上传速率比下载速率高
  • ¥15 (标签-游戏|关键词-网页游戏)