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();