基本上，我想做的是让我的每个帖子的特色图片以3行的形式显示，只显示特色图片。当您单击其中一幅特色图片时，行上方的div会向上滑动，其中包含帖子内容。

我不知道如何才能做到这一点，因为如果我将content div放在循环中，它会为每个帖子的内容生成一个单独的div。

以下是一些图片来展示我正在努力实现的目标：

Initial State:

Selected State:

以下是我目前拥有的代码：

<?php query_posts( array( \'post_status\' => \'publish\' , \'post_type\' => array( \'stories\' )  ) ); ?>
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) :?>
            <?php the_post(); ?>
                <div id="story">
                    <div class="story-info">
                        <div class="story-author">
                            <h3 class="name"><?php echo get_the_title(); ?></h3>
                            <p class="location"><?php echo get_field(\'location\'); ?></p>
                        </div>
                        <div class="story-content">
                            <?php echo get_the_content(); ?>
                        </div>
                    </div>
                    <div class="story-photo"><?php echo get_the_post_thumbnail($post_id, \'full\'); ?></div>
                </div>
        <?php endwhile; ?>
    <?php endif; ?>
<?php wp_reset_query(); ?>

以及Javascript：

$(\'.story-photo\').click(function() {
    $(this).siblings(".story-info").slideToggle(\'fast\', \'\');
});

然而，因为每个帖子的内容都在它自己单独的div中，所以我得到的结果是级联，而不是将行中的所有图像下移等量。有什么好办法解决这个问题吗？

谢谢

<div id="container">
    $count = 1;
    while loop
        <img id img$count..>
        <div id div$count...>
        $count++;
    Endwhile
</div>