3

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

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

4

1 回答 1

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/

于 2013-05-06T21:05:32.677 回答