Question

我正在帮助一位用wordpress编写电影网站的朋友。他希望在每个电影页面上显示电影直播（使用高级自定义字段，转发器字段），如下所示：

前三个演员（名称为固定链接，角色和图片）应公开显示为三行，其余部分应在切换中显示，可以通过“查看更多”链接打开并关闭“少看”链接。

这是一个例子，他告诉我要理解他应该看到的样子：https://www.moviepilot.de/movies/the-justice-league

我正在研究它，并且已经使代码ALMOST工作了。但编码，特别是Java Script和ACF对我来说都是新手，所以我找不到解决两个问题的方法：

我现在在切换中有所有演员（如何在切换之外获得前三个演员？）
我只有一个静态按钮可以打开和关闭切换，但不是“看到更多”链接来打开切换，而是“看不到”来关闭它（如示例电影页面所示）。

我尝试了谷歌，此处以及ACF网站上发现的每个代码段。但似乎我完全迷失了。每一个帮助都将非常感谢！这是我到目前为止的代码：

<style>
#filmcast-toggle {
    width: 100%;
    padding: 80px 0;
    display: none;
}
</style>



<button onClick="myFunction()">Show/Hide Cast</button>

<div id="filmcast-toggle">

<div class="filmcast-element"> 

//Page-Element ACF Filmcast    
<?php $i = 0; ?>

<?php 
    // check if the repeater field has rows of data
   if( have_rows('filmcast') ):

    // loop through the rows of data
   while ( have_rows('filmcast') ) : the_row(); ?> 

<?php if($i == 0) { echo '<div class="filmcast-row">'; } ?>

<div class="filmcast-half">
    <div class="filmcast-person">                           

    <?php $posts = get_sub_field('filmcast-person');

        if( $posts ): ?>

        <?php foreach( $posts as $post): setup_postdata($post); ?>

            <div class="filmcast-image">
            <?php the_post_thumbnail ( array (120, 140));  ?>
            </div>

            <div class="filmcast-name"> 
            <a href="<?php echo get_permalink($post->ID); ?>">
            <?php echo get_the_title($post->ID); ?></a>
            </div>

            <div class="filmcast-rolle">
            <?php the_sub_field('filmcast-rolle'); ?>
            </div>

        <?php endforeach; wp_reset_postdata (); ?>

<?php endif;?>

 </div> 
    </div>

<?php $i++; if($i == 3) {   $i = 0;     echo '</div>'; } ?>     

<?php endwhile; ?>

<?php if($i > 0) {  echo '</div>'; } ?>

         <?php else :
            // no rows found

          endif; ?> </div>
</div>



<script>
function myFunction() {
    var x = document.getElementById('filmcast-toggle');
    if (x.style.display === 'none'|| x.style.display == '') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

ACF中继器字段 - 显示前3个字段，其余字段显示为

0 个答案: