Question

我有一个test page来更好地解释我的问题。我在列表中有几个项目（它们是测试页面上的图像）;当我点击其中一个时，一个相应的幻灯片，使用flexslider，向下滑落。

问题在于，在页面加载时，幻灯片显示一次显示所有幻灯片，其尺寸远小于预期。但是，如果我从窗口切换焦点（即在浏览器标签之间切换或移动到另一个程序并返回），幻灯片现在正在工作，幻灯片的大小合适。这也发生在移动设备上。

当我查看firebug时，有一个适用于ul.slides的element.style规则：

transform: translate3d(-89px, 0px, 0px);

隐藏其中一张幻灯片。另外，ul.slides中的列表项还有另一个规则，它们给出了它们的初始宽度，这对于所有滑块都不一样，所以我不明白它的来源。

有人可以看看并建议修复吗？我已经尝试覆盖了element.style规则，但到目前为止还没有成功。

Answer 1

我想我至少已经弄明白了......

.flexslider{display:none;}似乎抛弃了Flexslider的重新调整大小功能。你可以删除它，但这会导致一些丑陋的加载。

为了避免这种丑陋的加载，我整理了一个快速的解决方案 - jsFiddle

$(document).ready(function(){
    $(".flexslider").css('display','block').slideUp();
});

加载时仍有一个快速的故障，但希望它至少会引导你朝正确的方向发展。

我玩的另一种方法是尝试强制重新调整大小函数 -

$(".client").click(function () {
    $('.flexslider').resize();    // Problematic but promising
    var project = this.id;
    var project_id = '#' + project + '-project';
    var elem = $(".flexslider:visible").length ? $(".flexslider:visible"): $(".flexslider:first");
    elem.slideUp('slow', function () {
        $(project_id).slideDown('slow');
    });
});

这种解决了迷你图片的问题，但充其量只是参差不齐。

手风琴里面的弹性滑板行为问题

1 个答案: