2

我正在尝试制作类似于 Google 在其图像搜索结果中使用的向下滑动功能。

我在这个 jsFiddle 中有一些工作：

http://jsfiddle.net/ultraloveninja/X7rmK/

使用 jQuery：

$(document).ready(function () {
    $('.slider').click(function (e) {
        e.preventDefault();
        $('.internal').slideUp('normal');
        if ($(this).next().is(':hidden') === true) {
            $(this).addClass('on');
            $(this).next().slideDown('normal');
        }
    });
    $('.internal').hide();
});

但我不确定如何获取它，因此与图像相关的内容位于其下方。

我确实找到了这个链接： http ://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

但是当它与同位素结合时会引起一些问题。所以，我正在尝试自己动手，看看我是否可以实现类似的东西，在使用同位素过滤时会起作用。

不太确定是否需要在 CSS 中设置不同的内容，或者是否需要让 JS 以不同的方式对其进行命令。

4

1 回答 1

2

你为什么不把你的内容放在滑块中，在图片之后。它们属于一起，因此将它们分组是有意义的。它也会让你的问题（和 js）更容易。看看这个：http:
//jsfiddle.net/Pevara/X7rmK/2/

html 现在看起来像这样：

<div class="slider">
    <img src="..." />
    <div class="internal">Content here</div>
</div>

js变得更短了：

$('.slider').click(function () {
    $(this).find('.internal').slideToggle();
});
于 2013-06-11T19:34:37.797 回答