3

我正在努力在 Wordpress 上复制Angular 主题中发生的事情。

我已经能够获得同位素来过滤 post_thumbnails 显示它们并且它的动画效果很好但我坚持的是当单击图像或链接时,该帖子/投资组合的内容会显示在新的 div 中。理想情况下,将盒子推开,因此如果您在移动设备上,则不必滚动到顶部。

任何让我开始的指针都会很棒,只是在任何地方都找不到这样的东西,并认为它对其他人非常有用:)

谢谢

4

1 回答 1

1

实际上,这可以很容易地实现。基本上你只需要为所有同位素项目添加一个点击处理程序。处理程序必须确定哪个元素已被单击(例如,通过检查被单击项目的类名,但当然有很多方法),然后将相应的内容添加到您的div元素中。

如果内容必须显示在适当的位置,那就更容易了。您可以简单地将预览和完整内容添加到同一个同位素项目,但默认隐藏完整内容:

<div class="item">
    <div class="preview">...</div>
    <div class="full">...</div> <!-- hidden with CSS -->
</div>

然后为所有同位素项目添加一个点击处理程序:

$(".item").click(function(){
    $(this).toggleClass("big");
    $("#container").isotope("reLayout");
});

当点击的项目展开时,通过调用.isotope("reLayout")其他项目被推开。

最后,您需要一些基本的 CSS 规则来制作更大的div元素,默认隐藏,但在 parent 中设置时显示。在那种情况下,当然必须隐藏;这一切都可以用 CSS 完成,不需要 JavaScript/jQuery。.big.full.bigdiv.preview

好吧,解释起来有点麻烦——我猜一个例子说了一千多个词:JSFiddle

当然这只是一个非常基本的例子,但希望它能解释我的意思。;)

于 2012-12-15T02:50:07.300 回答