Question

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

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

问题在于：

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

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

多一点信息here。

Answer 2

稍微调试并发现当浏览器重新定位（并且轮播已经可见）时，调用其重载函数来调整其位置，以便在hide / show div场景中帮助自己，我最终调用了旋转木马包装div变为可见后，api的重载功能。

有点努力实际上是抓住了jcarousel实例。所以这是一个两步过程...

抓住轮播实例。

 var cInstance = null;
 cInitCallback = function(c){
     cInstance = c;
 };

$('#mycarousel').jcarousel({
        initCallback: cInitCallback,

    });

在div的节目中重新加载轮播
```
 cInstance.reload();
```

jCarousel没有被隐藏在div中

2 个答案: