Jquery回调与砌体插件

Question

我有一个基本的切换开关,显示点击的div同时关闭所有其他类似的div.这很好用,切换不是问题.见下文:

$(document).ready(function(){
 $('.threadWrapper > .littleme').click(function() {
  $(this).next().toggle('slow');
  $(this).toggle('slow');
  $('.littleme').not(this).next().hide('slow');
  $('.littleme').not(this).show('slow');
  return false;
 }).next().hide();
});

我也使用了jQuery的Masonry插件,它可以组织所有选定的div元素,然后垂直地组织.辉煌,适用于各种不同的div高度.见下文:

$(function(){
    $('#mainContent').masonry({
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible',
});
});

我想要它做的是每次div扩展或折叠时重新组织布局.实际上触发.masonry命令作为初始.click函数的回调.这对我不起作用.适用于初学者的问题.

了解它目前如何在这里工作:kalpaitch.com

安德鲁

Gaby - 感谢语法检查,我非常善于将这些人弄松,然后花了大约半个小时的时间来寻找它们.

Cyro - 这是完美和有效的,我将在不久的将来使用它.我想要添加的是在显示/隐藏/切换这些动画速度的情况下如何实现这一点(上面的代码相应地改变).然后,在扩展div之前将触发砌体调用(目前正在kalpaitch.com上发生).非常感谢答案,但这种方式肯定更容易.

Answer 1

单击更改解决后，尝试重新运行砌体调用以重新调整页面：

$(document).ready(function(){
 $('.threadWrapper > .littleme').click(function() {
  $(this).next().toggle();
  $(this).toggle();
  $('.littleme').not(this).next().hide();
  $('.littleme').not(this).show();

  // re-run masonry
  $('#mainContent').masonry({
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible'
  });

  return false;
 }).next().hide();
});

编辑：查看 Masonry 文档，Masonry 似乎会保存您的初始设置，因此您只需再次调用 main 方法。这应该也有效：

$(document).ready(function(){
 $('.threadWrapper > .littleme').click(function() {
  $(this).next().toggle();
  $(this).toggle();
  $('.littleme').not(this).next().hide();
  $('.littleme').not(this).show();

  // re-run masonry
  $('#mainContent').masonry();

  return false;
 }).next().hide();
});