jQuery投资组合切换弄乱了位置答案

【问题标题】：jQuery portfolio toggle messing with positionjQuery投资组合切换弄乱了位置
【发布时间】：2013-05-06 20:18:41
【问题描述】：

我有一个带有图像的投资组合网格，每个图像上都有一个 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;
    }

很多东西都是新手，请帮忙:)

【问题讨论】：

我不太明白你的两个截图之间的区别。你点击的是什么图片？
我希望，当我单击任何图像时，看起来像第二个屏幕截图。在第一个屏幕截图中，我点击了第三张图片，它拆分了我的列（因为自然流动）
我希望列总是每行有 5 个项目。无论我点击什么图片
你将不得不改变你的页面结构。您需要将图像组织在不同的 div 中，每行一个。然后，当您单击图像时，只需在“line-div”之后附加切换部分
但我在 wordpress 上使用 post 循环的缩略图，无法分隔每个 div 的图像。

标签： jquery html css wordpress

【解决方案1】：

您可以执行以下操作：

获取.index()点击图片的索引

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

然后找到最接近的图像，它是 5 的倍数，并且在当前索引之上:eq

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

找到它后，附加toggleSectioncontainer。

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

如果人们偶然发现该线程，这是一个通用的 jsfiddle：

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

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

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

【讨论】：