Question

我正在使用Isotope并遇到一个奇怪的问题：在某些浏览器中，第一个项目是不可链接的。它发生在Mac上的所有IE和Firefox版本中。我在页面上有过滤器，如果你点击一个，那么第一个项目就变成了可链接的。但最初并非如此。

我看到另一篇关于第一个项目的帖子，解决方案与列宽有关...但在我的情况下我改变了，因为这是一个响应式网站。

以下是代码：

var $container = $('#project-thumbs');          
var $default_filter = ".featured";                  

$container.isotope({
    animationEngine: 'best-available',
    filter: $default_filter,
    itemSelector : '.thumb',
    // disable resizing
    resizable: false
});

// update columnWidth on window resize
$(window).smartresize(function(){
  $container.isotope({

  });
});

有什么想法？

更新1：实际上，它似乎适用于所有浏览器（PC Firefox和Chrome）。

我确实发现如果我改变我的拇指（被移动的元素）使用Firebug获得“position：relative”，则第一个项目变得可链接。但是，该插件添加了“position：absolute”（并且可能需要），因此我自己设置此样式会被覆盖。但也许这是一个线索？

更新2：我越走越近了。我认为这是问题的一部分。我正在做的是，而不是最初显示所有项目，我正在显示一个子集。如果查看HTML，列表中的第一项实际上是隐藏的，因为它不属于我的子集。但是，它的链接似乎优先于“可见的”第一项......

更新3：更多细节......与此同时，我试图弄清楚为什么有些文字在Android智能手机的这个页面看起来很模糊。我发现添加transformsEnabled：false修复了问题。然而，拥有它会导致这种“非链接”问题更频繁地发生 - 并且在所有浏览器中。这几乎就像物品没有给出正确的z指数或其他东西。

Answer 1

好的，所以我有一个可以完成工作的解决方法，虽然它不是最优雅的选择。

不是使用同位素插件过滤初始视图，而是让它加载所有内容。然后，我使用常规jQuery触发页面上的过滤器链接上的click事件，用于我最初加载的类别。

// delay, then trigger click on Featured
$('#sub-nav a.featured').delay(5000).trigger('click');

正如我上面提到的，我注意到一旦你开始点击不同的过滤器，问题就会消失。因此，这有效地启动了有助于避免这种情况的点击。

如果有的话，仍然会对修复感兴趣！

感谢。

同位素：第一项有时不可链接

1 个答案: