Question

我正在使用Salvattore插件为我的网站创建基于网格的布局。

以下是插件应如何在HTML中设置：

<div class="grid columns2" data-columns>
  <img src="">
  <img src="">
</div>

它基本上找到.grid，然后.columns3，它确定插件应在.grid内创建的列数。

结果如下：

<div class="grid" data-columns="2">
    <div class="column count-2">
      <img src="">
    </div>
    <div class="column count-2">
      <img src="">
    </div>
</div>

一切正常，直到.grid是父母的孩子display: hidden - 即：

<div style="display:none" id="popup">
  <div class="grid" data-columns="2">
     <div class="column count-2">
        <img src="">
     </div>
    <div class="column count-2">
       <img src="">
    </div>
  </div>
</div>

为什么我给它显示：无？好吧，我试图在div中使用这个.grid默认隐藏，只在请求时显示，例如，在弹出窗口或UI手风琴和标签内。

我在这里创建了一个实时测试：http://loai.directory/beta如果你看，你会看到两个容器，.grid一个工作正常，另一个容器在下面，它说隐藏的div在我下面这是有问题的。

这就是我想做的事情＆＃34;但是没有技巧可以尝试，甚至不知道从哪里开始＆＃34; - 我想知道，如果每次.grid状态改变时使用JavaScript再次触发插件，问题是否会得到解决？

Answer 1

您在Salvatore插件中遇到的问题是在grid-system.js（ln.538）

self.registerGrid = function registerGrid (grid) {
    if (global.getComputedStyle(grid).display === "none") {
        return; // so basically any class or inline style with display set to none :s
    }
    /*...*/
};

要解决此问题，您可以将唯一事件绑定到其“切换/显示”触发器。理想的是，所有触发器和隐藏层都匹配唯一的id或一些常用的映射引用。

<a href="#" data-ref="popup">trigger popup</a>
<div id="popup" class="grid hide" data-columns></div>

然后js会是这样的：

function delayedGrid() {
    var grids = $('.grid.hide[data-columns]'); // assuming they all have the hide class
    // var grids = $('.grid:hidden'); // could work as well

    $.each(grids, function(){
        // pickup the mapped references from your grid (id and ref)
        var grid = $(this),
            id = grid.prop('id'), // get the id reference
            ref = $('[data-ref="' + id + '"]'); // get the referenced element by data-ref="popup" for ex.

        // one time only event
        ref.one('click', function() {
            // gives browser reflow a better chance
            setTimeout(function() {
                // call the grid initializer again
                salvattore.init();
            }, 200);
        });
    });
}

然后，您需要做的就是在DOM准备好，或在onload上，或在调整大小时，或者在需要重新计算隐藏网格的时候渲染delayedGrid。

// DOM ready
$(fuction(){
    delayedGrid();
});

// window load
$(window).load(function(){
    delayedGrid();
});

// window resize
$(window).on('resize', function(){
    // google for throttle function perhaps
    delayedGrid();
});

网格系统在隐藏的div中时不起作用

1 个答案: