jCarousel没有被隐藏在div中

Question

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

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

这是问题所在：

单击另一个按钮可以隐藏包含ul / li项目的div。 当div被隐藏，并且我重新调整浏览器窗口的大小时，jCarousel也会尝试重绘自己，但由于它是隐藏的，因此无法正确绘制它。 结果是所有内容都在列表中混乱（如果我再次单击该按钮使其可见）。 但是，如果我现在重新调整窗口的大小（混乱的jCarousel现在不被隐藏），它会正确地重绘自己。

我尝试获取jCarousel实例的ahold，并在单击按钮后立即重新加载div以使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将跳转到位。

这里有更多信息。

Answer 2

稍微调试一下，发现当浏览器重新设置（并且轮播已经可见）时，会调用其重载函数来调整其位置，所以为了帮助自己隐藏/显示div场景，我最终调用了轮播api的重载功能包装div变得可见之后。

实际上抓住了jcarousel实例需要付出一些努力。 所以这是一个两步的过程......

1. 抓住轮播实例。

     var cInstance = null; cInitCallback = function(c){ cInstance = c; }; $('#mycarousel').jcarousel({ initCallback: cInitCallback, }); 

2. 在div的节目上重新加载旋转木马

     cInstance.reload();