列表

Question

我希望列表中的所有元素都相等。为此，我正在使用

jquery.matchHeigh插件。但是，所选项目不会自动更新

调整屏幕大小时：

我希望自动更新尺寸，但我只在更新

时得到这个结果

页：

我正在使用基本功能：

$('.product-info .product-name').matchHeight({ property: 'min-height' });

完整代码为here。欢迎任何帮助！

P.S：我正在使用Owl Carousel列表。

Answer 1

这里的问题似乎只是窗口调整大小和实际window.resize事件触发之间的滞后时间问题。通过将事件包装在窗口大小调整并添加稍微超时，我已设法解决问题：

var lagTime = 500;   //Play around with this number
$(window).on("resize", function() {
    setTimeout(function() {
    $('.product-info .product-name').matchHeight({
        property: 'min-height'
    })}
    , lagTime);
}).trigger("resize");

请注意，我还在其末尾添加了.trigger()，这会在页面加载时触发resize事件。

考虑根据需要减少lagTime变量，您应该可以使用低于我在此示例中使用的500的内容。

Answer 2

在CSS中使用flexbox是一个选项吗？如果是，请将display: flex;添加到父级，并且所有子元素高度将相等。您需要使用嵌套在其中的子元素需要position: absolute;等等，但这可以通过CSS完成而无需修改HTML标记。

我在这里有一个更简化的codepen演示：https://codepen.io/anon/pen/wjyVyZ

Answer 3

我再次阅读了jquery.matchHeigh plugin documentation并找到了此article。结合Santi的答案，我相信我达到了预期的结果：

// the original group of .product-info .product-name
$('.product-info .product-name').matchHeight({ property: 'min-height' });

// on rezise event
$(window).on("resize", function() {

  setTimeout(function() {

  // remove the old group
  $('.product-info .product-name').matchHeight({ remove: true });

  // apply matchHeight on the new selection, which includes the new element
  $('.product-info .product-name').matchHeight();

  }, 250);

})

查看最终代码here。谢谢大家！