jquery選項卡 - 切換標籤頁時，下面的動態div不應該滑動

我有jQuery選項卡上下滑動的選項卡的內容。這些標籤是可摺疊的，當標籤關閉時內容也會向上滑動。但是當我在標籤之間切換時，內容也會在應該保持原狀的時候上下移動。我試圖用事件處理程序來解決這個問題，但正如您在這裏看到的http://jsfiddle.net/eqUVm/5/，問題仍然存在。jquery選項卡 - 切換標籤頁時，下面的動態div不應該滑動

有沒有人知道我的問題可能的解決方案？

編輯：我忘了一些必要的東西：內容（地圖）需要一個絕對的位置，否則它不會顯示。鏈接已更新

來源

2012-07-05 bennos

見http://jsfiddle.net/kXS4g/4/

被取消選擇的選項卡時，我只是動畫。在jQuery UI中顯然沒有取消選擇事件，所以我通過計算'ui-tabs-selected'元素來檢查選擇（應該爲零）。不幸的是，這個css類直到選擇回調完成後才被刪除，所以我選擇使用的hackish方法是setTimeout來延遲函數調用。

您可能還想調整setTimeout的時間。我擺弄了一下，如果你點擊了很快或者電腦掛了，它有點不可靠。 20ms以下的任何東西都將不可察覺。

另一個詭計 - 您可以使用stop(false,false)來防止快速切換的雙重動畫 - 動畫將嘗試從其離開的地方繼續。意思是，如果你打開選項卡並在動畫的中途決定關閉動畫，動畫將立即向後循環而不是排隊。

考慮調查一種更正式的方式來檢測取消選擇，如果您遇到該問題setTimeout(..., 20)。我只是想讓它爲你工作。

最後，我用console.log來了解何時發生事件的感覺。我的期望是，只有當你選擇標籤時纔會觸發select，就像關於什麼時候添加/刪除css類一樣。斷點可以工作得很好（在Firebug或Chrome中可用）。有時手冊沒有涉及到這些細節。

來源

2012-07-05 16:54:14 Koobz

非常感謝，正是我需要的！ – bennos 2012-07-05 17:05:43

這是一個CSS問題。您對#content div有絕對定位，並且它位於距文檔頂部58px處。

試試這個：

#content{ 
    border:1px solid black; 
    margin: .2em; 
}

和：

.ui-tabs .ui-tabs-panel { 
    background: none repeat scroll 0 0 transparent; 
    border-width: 0; 
    display: block; 
    height: 125px; /* Added this */ 
    padding: 1em 1.4em; 
}

從那裏工作了您的大小。

來源

2012-07-05 16:00:08 honyovk

感謝您的快速回答，但我忘了一些必要的東西：div必須與絕對位置，否則內容（地圖）不顯示。 – bennos 2012-07-05 16:27:24

jquery選項卡 - 切換標籤頁時，下面的動態div不應該滑動

回答

相關問題