Question

我已经将devery添加到我的开发站点以使用新的布局 - 它运行良好，因此我将相同的代码转换为生产。出于某种原因，它不会通过我的prod实例执行。我最初的想法是当我运行预编译时它的代码排序问题。

Here is my dev instance显示工作代码。 Here is my prod instance代码似乎没有初始化。

这是我的CSS：

/* Packery */

.item-content {
  border-color: hsla(0, 0%, 100%, 0.4);
  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
}

.item.is-expanded {
  z-index: 2;
}

我的jquery：

//Packery

var $container = $('.packery').packery();

  $container.on( 'click', '.item', function( event ) {
    var $item = $( event.currentTarget );
    var isExpanded = $item.hasClass('is-expanded');
    $item.toggleClass('is-expanded');
    if ( isExpanded ) {
  // if shrinking, just layout
  $container.packery();
    } else {
      // if expanding, fit it
      $container.packery( 'fit', event.currentTarget );
    }
  });

我目前还没有使用点击功能，但计划将来保留在代码中。

我的HTML：

<div id="container" class="packery">
    <%= render partial: 'shared/show_projects', collection: @projects %>
</div>

部分：

<div class="item capsule span6">
  <p>
    <div class="row">
      <div class="span4">
            SNIP!
      </div>
    </div>
  </p>
</div>

当我的预编译运行时，我的jquery被插入到packery.js之上，所以它没有按预期初始化吗？

Answer 1

我运行了一些测试，并确定包装代码按预期工作 - 如果我点击了一个，我会看到附加的新类意义包装正在按预期工作。

我仔细研究了我的HTML，我的问题是我在“容器窄”中定义了内容，因此填充不会扩展以填充空白区域。

删除了“容器缩小”限制 - 问题解决了！

为什么我的包装代码不执行？

1 个答案: