jQuery组合切换混乱的位置

Question

我有一个带有图像的投资组合网格，每个图像都有一个jQuery切换。

当我点击图片时，它看起来像这样：

我希望是这样的：

我不想要我的切换信息，按下我的投资组合图片，也许我知道它为什么会发生，但仍然无法解决它。

HTML：

    <div id="blog">
    <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> 
    <div class="post" id="<?php the_ID(); ?>">
        <div class="thumbnail">
            <?php the_post_thumbnail( 'mainimg' ); ?>               
        </div>
        <div class="toggleSection">
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <h3>Posted in: <span><?php the_category(', ') ?>  </span>On: <span><?php the_time('l, F jS, Y') ?></span></h3>
            <p><?php the_content(); ?> </p>
        </div>
     <?php endwhile; ?>
     <?php endif; ?>
    </div>
</div>

CSS：

    #blog {
position: relative;
height: 900px;
width: 905px;
margin: 0 auto;
margin-top: 10px;
clear: both;
    }

    .thumbnail {
z-index: 0;
float: left;
margin: 4px 3px 0px 3px;
cursor: pointer;
    }

    .toggleSection {
margin: 0 auto;
clear: both;
display: none;
background-color: pink;
height: 300px;
width: 900px;
    }

新的很多东西，请帮忙:)。

Answer 1

您可以执行以下操作：

获取点击.index()

的图片索引

var currentIndex = $('.image').index(this); 

然后找到距离为5的倍数的最近图像，并使用:eq找到当前索引的上方

  var nextFiveMultiple = (Math.floor((currentIndex+5) / 5) * 5)-1;

找到后，添加toggleSection容器。

$('.image:eq('+nextFiveMultiple+')').after('<div class="toggle"></div>');

如果人们在这个问题上磕磕绊绊，这是一个普通的jsfiddle：

http://jsfiddle.net/rNUDm/2/

以下是该jsfiddle的另一个编辑，它将适合您的特定代码：

http://jsfiddle.net/rNUDm/3/