jQuery手风琴默认折叠在页面加载时

Question

我正在使用 JQuery UI 折叠面板在我的页面上。我在页面加载时有以下的Javascript代码：

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

});

当页面加载时，所有选项卡都会打开几秒钟，然后折叠。可能是它的加载效果。我该如何让Jquery UI手风琴在页面加载时处于折叠状态？请建议。

- DotnetSparrow

---

你能在 http://www.jsfiddle.net 上重现这个问题吗？ - Andrew Whitaker

@Andrew：请检查链接。http://jsfiddle.net/47aSC/ 抱歉我第一次使用它且格式不正确。我猜 jQuery 链接需要来自实时网站。 - DotnetSparrow

可能是重复的问题，与https://dev59.com/cm445IYBdhLWcg3w6ebz相似。 - Mrchief

@Mrchief：我已经在使用active false了。 - DotnetSparrow

可能是 在 jQuery Accordian 中加载页面时折叠所有部分 的重复问题。 - rofrol

Answer 1

虽然不是直接的答案，但也许你可以将其渲染为隐藏状态，然后在创建时显示出来：

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

更新：这个fiddle对我来说有效：http://jsfiddle.net/47aSC/6/

- Mrchief

---

@mootinator @Merchief：我使用了“display none”并使用了你们两个的代码示例，但当页面加载时手风琴是不可见的，然后突然出现。我希望手风琴在页面加载时存在，但是折叠起来。 - DotnetSparrow

抱歉，我第一次使用jsfiddle.net/47aSC，它没有格式化。我猜jquery链接需要来自实时网站。我在asp.net内容页中使用它。也许这就是原因？ - DotnetSparrow

检查一下你的jQuery.js和jQuery UI js版本。也许你正在使用旧的或有缺陷的版本？ - Mrchief

还添加了主题：http://jsfiddle.net/47aSC/5/。我可以看到所有内容默认都是折叠的。 - Mrchief

像这样的CSS：jquery-ui-1.8.11.custom.css - DotnetSparrow

Answer 2

对我而言，这个方法可行：

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

        });
});

- mat0r

Answer 3

可能是页面末尾加载某些内容比较慢。如果无法解决此问题，您可以尝试在CSS中声明应用了display:none的元素，然后：

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

可能有更简洁的方法（如@Mrchief所建议的），但我认为.accordion()不能很好地格式化隐藏元素。你需要进行测试。

- Kevin Stricker

Answer 4

最佳解决方案是：

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

将第29行编辑为Active: 100, 将第31行编辑为collapsible: true, 这样，您不需要在页面头部编写任何脚本或函数。通过将Active设置为一个高数字（例如100），您正在表示第100个h3标记是活动的（基本上不存在）。 collapsible: true表示所有打开的h3标签都是可折叠的。

它完全解决了问题。

- EhsanSia

Answer 5

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

这将会把DOM中所有的.collapse类都设置为关闭状态，但是只有在DOM完成加载后才会生效。

- Bhargav Chudasama

Answer 6

// 我们还可以使用以下代码在页面加载时折叠手风琴，当我们使用Bootstrap 2.0时应该使用它

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

否则我们应该使用下面的代码来适配Bootstrap 3.0

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

- Sheo Dayal Singh