我正在尝试制作类似于 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 以不同的方式进行命令。
最佳答案
为什么不将内容放在 slider 内、图像之后。它们属于同一类,因此将它们分组是有意义的。它还会让你的问题(和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();
});
关于javascript - 向下滑动类似于谷歌图像结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17051893/