javascript - jCarousel 没有在隐藏的 div 中绘制

Question

我正在使用一个 div 来填充一个 ul/li 列表，然后从中绘制一个 jCarousel。 所以这很好用:

$('#mycarousel').jcarousel();

问题是:

包含 ul/li 项的 div 可以通过单击另一个按钮来隐藏。当 div 隐藏时，我重新调整浏览器窗口的大小，jCarousel 也会尝试重绘自身，但由于它是隐藏的，因此无法正确绘制。结果是列表中的所有内容都乱七八糟(如果我再次单击该按钮以使其可见)。但是，如果我现在重新调整窗口大小(困惑的 jCarousel 现在没有隐藏)，它会正确地重绘自己。

我尝试获取 jCarousel 实例并在单击按钮后立即重新加载自身以使 div 可见(当它可见时它重新调整自身大小并重新调整窗口大小时的方式)。

为了获得 jCarousel，我正在使用:

JQuery('#mycarousel').data('jcarousel') 

它返回为 null。

如何让 jCarousel 正确绘制？

Answer 1

是什么让您假设 $().jcarousel() 调用对 .data() 执行任何操作？无论如何最好坚持使用插件提供的 API，而不是猜测它在幕后是如何工作的。无论如何，回答你的问题......

问题是，当一个 div 被隐藏时，它没有高度或宽度。使用“左移技术”而不是隐藏 div，如下所示:

#mycarousel {
    height: 100px; /* whatever height your div will have when shown */
    width: 100px;  /* whatever width your div will have when shown */
    position: absolute:
    left: -10000px;
}

想展示的时候，用$('#mycarousel').css('position', 'static')去掉绝对定位，div就会跳到位了。

更多信息 here .