jquery 手風琴在頁面加載時默認折疊

Question

我在我的頁面中使用 JQuery UI 手風琴。 我的頁面加載中有以下 Javascript 代碼：

$(function() {
    $("#accordion").accordion({
            active: false,
            autoHeight: false,
            navigation: true,
            collapsible: true
        });

});

當頁面加載時，所有選項卡都會打開幾秒鍾然后折疊。 可能是它的加載效果。 如何使 Jquery UI 手風琴在頁面加載時折疊。 請建議

Answer 1

雖然不是直接的答案，但也許您可以將其隱藏，然后在創建時顯示它：

$("#accordion").accordion({
   active: false,            
   autoHeight: false,            
   navigation: true,            
   collapsible: true,
   create: function(event, ui) { $("#accordion").show(); }
});

更新：這個小提琴對我有用：http://jsfiddle.net/47aSC/6/

Answer 2

對我來說，這有效：

$(function() {
    $( "#accordion" ).accordion({
            collapsible: true,
            autoHeight: true,
            active: false

        });
});

Answer 3

它可能正在緩慢地加載頁面末尾附近的內容。 如果你不能解決這個問題，你可以嘗試在 css 中聲明具有display:none的元素，然后：

$("#accordion").show().accordion({
        active: false,
        autoHeight: false,
        navigation: true,
        collapsible: true
    });

可能有一種更簡潔的方法（正如@Mrchief 建議的那樣），但我認為 .accordion .accordion()不能很好地格式化隱藏元素。 你必須進行測試。

Answer 4

最好的解決方案是：

打開 jquery.ui.accordion.js 並編輯第 29 和 31 行（順便說一下，我使用的是 1.10.4）。

將第 29 行編輯為Active：100，將第 31 行編輯為可折疊：true，

這樣就不需要在頁面的 header 中編寫任何腳本或 function。 通過將Active設置為較大的數字（例如 100），您表示第 100 個 h3 標簽處於活動狀態（基本上不存在）。

collapsible : true 表示所有打開的 h3 標簽都是可折疊的。

它徹底解決了問題。

Answer 5

$(document).ready(function() {
   $('.collapse').collapse({
     toggle: false
   });
});

這會將 DOM 中的所有.collapse類設置為關閉，但僅在 DOM 完成加載后才關閉。

Answer 6

// 我們也可以使用下面的代碼在頁面加載時折疊手風琴，它應該在我們使用 bootstrap 2.0 時使用

    $(document).ready(function () {
          if ($("#accordianId").length>0) {
                        $("#accordianId").trigger("click");
                    }
             });

否則，我們應該將以下代碼用於 bootstrap 3.0

$( "#accordianId" ).accordion( "option", "active", 0 );