使用 JS 调整 WordPress Jetpack Tiled Gallery 的大小答案

【问题标题】：Resizing WordPress Jetpack Tiled Gallery with JS使用 JS 调整 WordPress Jetpack Tiled Gallery 的大小
【发布时间】：2017-06-14 02:12:04
【问题描述】：

在我的 WordPress 主题中，我有一个隐藏的 div，里面有一个 Jetpack 画廊。我有一个按钮，单击该按钮会使div 使用jquery 的.slideDown() 出现。 div 内的喷气背包画廊仅以 100 像素宽显示，不会填满 div 内的空间。但是，当我调整窗口大小时，画廊会立即填充 div 中的空间，就像它假设的那样。

我将div 设置为display: block; 并正确显示，但是当div 设置为display:none; 然后使用jquery 的.slideDown() 显示时，它只有100px 宽。

我可以在按钮的.click() 事件上调用一个 js 函数，该函数可以触发 Jetpack Gallery 调整为div 的大小吗？当窗口调整大小时，它似乎会调整大小，所以我认为必须有一种方法可以在 .slideDown() 完成时调整大小。

HTML

<div id="container">
[gallery]
</div>

<button id="btn">Show</button>

CSS

#container { 
  display:none; 
  width:100%;
  height: auto;
}

    $('#btn').click(function(e) {
        $('#container').slideDown();
    });

【问题讨论】：

标签： jquery wordpress jetpack

【解决方案1】：

我解决这个问题的方法是

$('#btn').click(function(e) {
    $('#container').slideDown();
    $('.tiled-gallery').resize();
});

.tiled-gallery是jetpack创建的包裹画廊的div

【讨论】：