无法实现动态高度 jQuery 书签

Question

我有一些 div 具有由“点击”功能控制的动态高度，如下所示：

$('.expand').click(function() {
  $(this).next('.collapse').slideToggle();
});

我正在尝试将jQuery wookmark plugin 应用于 div，并且它可以工作，除了通过扩展其中一个部分来动态调整它们的高度。从文档中，我将其中一个示例复制到我的代码中，并且动态高度有效

        $(document).ready(new function() {
          // Prepare layout options.
          var options = {
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $('#container'), // Optional, used for some extra CSS styling
            offset: 30, // Optional, the distance between grid items
            itemWidth: 300 // Optional, the width of a grid item
          };

          // Get a reference to your grid items.
          var handler = $('.outerwrapper');

          // Call the layout function.
          handler.wookmark(options);

          // Capture clicks on grid items.
          handler.click(function(){
            // Randomize the height of the clicked item.
            var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
            $(this).css('height', newHeight+'px');

            // Update the layout.
            handler.wookmark();
          });
        });

你可以看到这个工作here。我怎样才能做到这一点，以便当您单击 div 内的标题之一时，布局会更新，就像在示例中那样。提前致谢。

Answer 1

通常第三方 jQuery 插件包含某种“刷新”或“调整大小”功能。

快速浏览一下函数，它似乎没有；但是，由于有一个“autoResize”选项（它将在浏览器调整大小时重新加载布局），您可以简单地创建一个触发“resize”事件的点击事件，如下所示：

JAVASCRIPT：

$("h1.resize").live("click", function()
{
    $(window).trigger('resize');
}); 

http://api.jquery.com/trigger/

http://api.jquery.com/resize/

---

编辑： 再次阅读问题， 看起来像这样： handler.wookmark();

应该刷新布局（基于您发布的代码）。所以你应该能够使用它而不是调整大小触发器。

$("h1.resize").live("click", function()
{
    handler.wookmark();
});