手風琴展示位置

我是jQuery的新手。我正在嘗試jQuery UI手風琴的功能，並有一個問題，以顯示它在適當的位置。我看到下面的問題已經問沒有答案，可能是類似的，但比我更復雜，因爲它涉及scrollTo，我不使用。 jQuery scrollTo accordion end position 手風琴展示位置

我的問題很簡單。當我使用jQuery網站的手風琴示例代碼並將長內容放在第一個面板中時。第二個面板將被推到更低的位置，您需要向下滾動才能找到面板。當您點擊2nd面板時，瀏覽器不會將您引導至手風琴的頂部或至少位於第2個面板的頂部。在查看第二個面板中的內容之前，用戶需要向上滾動。

Here是小提琴代碼。

請給予幫助。謝謝！

來源

2012-07-29 user1560363

您可以設置代碼滾動到新面板的頂部，當打開面板的變化，這樣的：

$("#accordion").accordion({ 
    change : function (event, ui) { 
     $('html, body').animate({ 
     scrollTop: $(ui.newHeader).offset().top 
     }, 500);   
    } 
});

您可能還需要設置autoHeight: false的手風琴，保持大小每個面板它的內容。

$("#accordion").accordion({ 
    autoHeight: false, 
    change : function (event, ui) { 
     $('html, body').animate({ 
     scrollTop: $(ui.newHeader).offset().top 
     }, 500);   
    } 
});

編輯：爲了解決這個問題是在一個註釋中所描述的問題，使用下面的代碼在手風琴的變化事件處理程序：

if(ui.newHeader.length > 0) { 
    $('html, body').animate({ 
     scrollTop: $(ui.newHeader).offset().top 
    }, 500); 
}

這將防止錯誤發生時，所有的面板已關閉。

jsFiddle是here。

來源

2012-07-29 15:30:56

亞歷克斯，感謝您的幫助，顯示動畫可以達到此目的的方式。我嘗試修改它以滿足我的需要，但是如果我不折疊所有面板，聽起來就可行。一旦我摺疊所有面板，手風琴功能似乎不再可行。你能幫助檢查是什麼導致衝突？再次感謝耐心澄清初學者的這些基本問題。 [Here]（http://jsfiddle.net/sg9jb/1/）是更新的小提琴示例代碼。 – user1560363 2012-07-30 06:58:00

我試圖搜索scrollup的一些信息，並在下面找到我相信是根本原因：**警告：.scrollTop（）將返回0（並將其設置爲任何不會工作）如果該元素或父元素，設置爲「display：none;」。在顯示元素後，我必須應用我的.scrollTop（）邏輯。**但是，我仍然無知，無法知道如何解決這個問題，然後在我的情況下應用這樣一個好功能。還有什麼提示讓我挖掘出來？謝謝！ – user1560363 2012-07-30 08:57:24

@ user1560363我編輯了我的答案 - 現在應該可以工作。附：請記住投票並接受解決問題的答案。 – 2012-07-30 14:22:30

手風琴展示位置

回答

相關問題