帮助Jquery + Masonry插件：如何展开/折叠框以显示内容

我正在项目中使用masonry jquery插件：（ http://desandro.com/resources/jquery-masonry ）

基本上我在网格中有一组框（缩略图）。 单击一个时，我希望它扩展到更大的尺寸以显示更多内容（其他图像和文本）。 我正在努力解决如何使缩略图消失，然后在展开的框中显示新内容。 我不知道如何使新内容出现或将其存储在我的页面上 – 它需要一个关闭按钮？ 插件的创建者给了我一个扩展部分的快速提示，但我使用的代码有一个设置的高度和宽度，我希望它们可以根据扩展状态中的内容量而变化。

到目前为止，这是我的jquery代码： http ： //pastie.org/1002101

这是我想要实现的行为的类似示例（除了我的盒子将具有不同的扩展尺寸）:( http://www.learnsomethingeveryday.co.uk ）

您还会从该示例中注意到，它一次只能扩展1个框 – 我还希望拥有该function。

对不起所有的问题 – 我对jquery很新，任何帮助都会很棒！

Answer 1

试试这个（ 这里的演示 ）：

$(document).ready(function(){ $('#grid').masonry({ singleMode: false, itemSelector: '.box', animate: true }); $('.box').click(function(){ if ($(this).is('.expanded')){ restoreBoxes(); } else { restoreBoxes(); $(this) // save original box size .data('size', [ $(this).width(), $(this).height() ]) .animate({ width: 335, height: 335 }, function(){ $('#grid').masonry(); }) .addClass('expanded'); } function restoreBoxes(){ var len = $('.expanded').length - 1; $('.expanded').each(function(i){ var box = $(this).data('size'); $(this).animate({ width: ( box[0] || 100 ), height: ( box[1] || 'auto' ) }, function(){ if (i >= len) { $('#grid').masonry(); } }) .removeClass('expanded'); }) } }); }); 

---

更新：嗨Jam，我不知道你给我发了评论，下次请在答案下添加评论或更新你的问题。 你也可以在这个人的名字前加上“@”，他们会得到一个消息标志。

在回答您关于设置大小和隐藏内容的问题时，我修改了演示 （几乎包括所有HTML和CSS）以显示不同的宽度框。 单击框展开以包含所有隐藏内容有一个小问题。 通常，隐藏内容的高度和宽度为零。 但是jQuery能够确定隐藏的内容大小，但它仍然存在一些问题，因为您可能需要限制隐藏内容的宽度或高度。 所以我最终做的是在框内添加隐藏内容，并在包含扩展隐藏内容的宽度和高度的框中添加data-size属性，例如：

 
 
This is the visible content.
 
 This is the hidden content which shows when the box is clicked. 
  

我还提供了一种在展开框时隐藏可见内容的方法，方法是在内容中添加一个可hideable类，因为您提供的图像似乎隐藏了原始内容：

 
 
This is the visible content.
 
 This is the hidden content which shows when the box is clicked. 
  

如果未设置data-size属性，则脚本将默认为defaultSize设置：

请注意 ，演示使用$(document).ready(function(){...})而不是$(window).load(function(){...}) ，这是砌体作者的建议，因为jFiddle只是没有我不想使用窗口加载。

 $(window).load(function () { var defaultSize = [180, 180]; // expanded box size: [width , height] $('#grid').masonry({ singleMode: false, columnWidth: 100, resizeable: true, itemSelector: '.box', animate: true }); $('.box').click(function () { if ($(this).is('.expanded')) { restoreBoxes(); } else { var size = ($(this).attr('data-size')) ? $(this).attr('data-size').split(',') : defaultSize; $(this) // save original box size .data('size', [$(this).width(), $(this).height()]).animate({ width: size[0], height: size[1] }, function () { // show hidden content when box has expanded completely $(this).find('.expandable').show('slow'); $(this).find('.hideable').hide('slow'); $('#grid').masonry(); }); restoreBoxes(); $(this).addClass('expanded'); } function restoreBoxes() { var len = $('.expanded').length - 1; $('.expanded').each(function (i) { var box = $(this).data('size'); $(this).find('.expandable').hide('slow'); $(this).find('.hideable').show('slow'); $(this).animate({ width: (box[0] || 100), height: (box[1] || 'auto') }, function () { if (i >= len) { $('#grid').masonry(); } }).removeClass('expanded'); }) } }); }); 

Answer 2

• 对不起，我还不能评论其他问题（因此答案框）

@fudgey

我有这个使用jqueryfilterfudgey帮助我。 我的问题是，无论出于何种原因，在谷歌浏览器中，砌体项目似乎没有完成页面加载的定位。 单击某些内容后，一切正常，只是初始页面加载有问题。 我在哪里/如何设置砌筑的加载时间？

另外，无论如何都有一个指针光标在这吗？ 目前，用户不知道点击元素。

Answer 3

我对此有所了解。 您可以将代码更改为：

 $('.box').click(function(){ restoreBoxes(); $(this) // save original box size .data('size', [ $(this).width(), $(this).height() ]) .animate({ width: 335, height: 335 }, function(){ $('#grid').masonry(); }) .addClass('expanded'); } $( '.expanded' ).find('.main_img').click(function() { restoreBoxes(); }); 

你仍然需要定义restoreBoxes函数的代码和顶部对Masonry的调用，我只需要包含需要添加的代码。 所以完整的代码看起来像这样：

 $(document).ready(function(){ $('#grid').masonry({ singleMode: false, itemSelector: '.box', animate: true }); $('.box').click(function(){ restoreBoxes(); $(this) // save original box size .data('size', [ $(this).width(), $(this).height() ]) .animate({ width: 335, height: 335 }, function(){ $('#grid').masonry(); }) .addClass('expanded'); } $( '.expanded' ).find('.main_img').click(function() { restoreBoxes(); }); function restoreBoxes(){ var len = $('.expanded').length - 1; $('.expanded').each(function(i){ var box = $(this).data('size'); $(this).animate({ width: ( box[0] || 100 ), height: ( box[1] || 'auto' ) }, function(){ if (i >= len) { $('#grid').masonry(); } }) .removeClass('expanded'); }) } }); }); 

我不确定这是否是最有效的方式，但我在我正在努力的网站上尝试了一个版本并且成功了。 只有当您使用类“.main_img”单击展开的div中的图像时，才会使div折叠。 您可以将其替换为您想要的任何类名，但请确保您要单击以关闭div的图像具有此类。 如果你想扩展div中的任何图像来关闭div，你可以简单地使用“img”代替“.main_img”。 让我知道这是如何工作的，如果你有任何错误，请在这里发布。