Javascript 同位素图像点击以显示top div Wordpress中的新内容

我正在努力复制Wordpress上发生的事情

我已经能够让Sotox过滤post_缩略图并显示它们，它的动画效果非常好，但我坚持的是，当单击图像或链接时，该帖子/公文包的内容将显示在一个新的分区中。理想情况下，在适当的位置并将框推到一边，这样如果你在移动设备上，就不必滚动到顶部

任何让我开始学习的建议都会很好，只是在任何地方都找不到类似的东西，并且认为这对其他人非常有用：）

---

谢谢

事实上这很容易做到。基本上，您只需向所有项目添加一个单击处理程序。处理程序必须确定单击了哪个元素（例如，通过检查单击项的类名，当然有多种方法），然后将相应的内容添加到

div

元素中

如果内容必须就地显示，则更容易。您只需将预览和完整内容添加到同一项目，但默认情况下隐藏完整内容：

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

通过调用

.isotox（“relayat”）

，当单击的项展开时，其他项被推开

最后，您需要一些基本的CSS规则，使

div

元素具有

.big

更大，默认情况下隐藏

.full

，但在父

div

中设置

.big

时显示它。在这种情况下，当然必须隐藏

.preview

；这一切都可以通过CSS完成，不需要JavaScript/jQuery

好的，解释起来有点麻烦-我想一个例子会说一千多个词：

---

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

非常感谢，这太完美了，我正在玩onclick事件，但无法让它工作，最后一件事是，您是否会设置一个if语句，以便在单击一个新的方块后将其最小化？我很喜欢学习JavaScript，只是一直想扩展我的HTML/CSS技能：）应该添加或者在新打开的div上有一个关闭按钮来执行相同的操作，只是不确定同位素是如何以这些方式工作的。再次感谢您的帮助添加关闭按钮也没什么大不了的。您只需要一些HTML+CSS和jQuery单击处理程序。这里有一个例子：极好的作品是一种享受，希望有一天我能回答这些问题谢谢@Aletheios

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