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