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()不能很好地格式化隐藏的元素。你必须测试。

Answer 4

最佳解决方案是：

打开jquery.ui.accordion.js并编辑第29和31行（顺便说一句，我使用的是1.10.4）。

将第29行编辑为有效：100， 将第31行编辑为可折叠：true，

这样您就不需要在页面标题中编写任何脚本或函数。通过将活动设置为较高的数字（例如100），您说第100个h3标签处于活动状态（基本上不存在）。

可折叠：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 );

jquery accordion在页面加载时默认折叠

6 个答案: