像Google图片一样展开/折叠框

Question

我明白了：

file=$(curl -s "http://example.com/someFile.xml" | sed -E "s/(.{1,255})/ l_clob := l_clob || '\1';\
/g")

我希望 <div class="col-lg-3"> <div class="visibleContent"> </div> <div class="expandibleContent"> </div> </div> <div class="col-lg-3"> <div class="visibleContent"> </div> <div class="expandibleContent"> </div> </div> <div class="col-lg-3"> <div class="visibleContent"> </div> <div class="expandibleContent"> </div> </div> <div class="col-lg-3"> <div class="visibleContent"> </div> <div class="expandibleContent"> </div> </div> 可点击以展开.visibleContent，例如带有三角指针的Google图片。

更正示例：LINK

我试图深刻理解这些代码，但我无法理解。 你能编写一个具有相同功能但只有四个图像的代码吗？

我只需要一个包含4个图像的网格，这些图像具有相同的 slidetoggle 功能。

Answer 1

检查出来

https://codepen.io/anon/pen/owbebY 变化

$('.image-grid').empty().html(cells(50));

到

$('.image-grid').empty().html(cells(4));

你需要这样吗