JQUERY UI手风琴默认折叠

Question

如何使jQuery UI手风琴在表单加载时开始折叠。 是否有相应的JavaScript代码实现此功能？

- H Bellamy

Answer 1

在您的选项中指定：

{
  ...
  active: false,
  collapsible: true,
  ...
}

请参阅active的文档。

- topek

---

截至今日，仍在使用JQuery 1.4.4进行工作，但是在IE 8上，Visual Studio 2010会抛出一个JScript错误（UI中没有错误）。 - deltree

它仍然显示手风琴折叠，有没有办法加快初始折叠或防止这种情况发生？animate: false可以消除动画效果，但是会一直消失，理想情况下只能在初始加载时删除它。 - Markus

请忽略，我在没有包含 $( function() { } ); 的情况下，.accordion正常工作，并且在初始加载时没有动画效果，很好。 - Markus

Answer 2

我正在尝试做同样的事情。使用Jquery UI选项卡。我想在开始时不显示任何内容，但有5个选项卡。

使用active：false会显示第5个选项卡的内容。 因此，我将选项卡CSS设置为display：none; 因为它可以内联更改显示。希望这能帮助某人！

<script>
$(function() {
    $( "#tabs" ).tabs({
        active: false,
        collapsible: true,
    });
});

And in the style

#tabs-1, #tabs-2, #tabs-3, #tabs-4, #tabs-5{ 
    display:none;
}

- nonono nonono

Answer 3

我使用了这段代码，因为我正在使用Dreamweaver小部件，Topek的代码对我不起作用。希望这可以帮到你。

jQuery("#jQueryUIAccordion").accordion({ 
        event: "click",
        active: false,
        collapsible: true,
        autoHeight: false

    });

- Lyndon John Haslam

Answer 4

为了完成 topex的答案, 我需要在设置'active'选项之前设置'collapsible'选项，使用Jquery UI 1.10.3。

$( ".accordion" ).accordion("option", { 
    collapsible: true,
    active: false
});

请查看文档

- shagshag

---

它仍然显示手风琴折叠，有没有办法加快初始折叠或防止这种情况发生？animate: false可以消除动画效果，但是会一直消失，理想情况下只能在初始加载时删除它。 - Markus

请忽略此内容，我已经将 .accordion 包装在 $( function() { } ); 中，现在它可以正常工作了，而且在初始加载时没有动画效果，非常好。 - Markus

Answer 5

如果您使用默认的jquery手风琴，它将始终显示第一个面板的内容，您可以通过使用active: false属性来禁用它。

jQuery(document).ready(function() {
    jQuery( "#accordion" ).accordion({
      collapsible: true,
      active: false,
    });
});

但是默认情况下，所有面板的高度都将设置为最高面板的高度。因此，您需要添加 "heightStyle" 属性。

heightStyle: "content",

所以，每个面板的高度将仅与其内容一样高。

- Ashish Patel

---

它仍然显示手风琴折叠，有没有办法加快初始折叠速度或防止这种情况发生？animate: false可以消除动画效果，但是会一直消失，理想情况下只能在初始加载时删除它。 - Markus

请忽略此内容，我已经将 .accordion 包装在 $( function() { } ); 中，现在它可以正常工作了，而且在初始加载时没有动画效果，非常好。 - Markus

Answer 6

如果你正在使用所见即所得的“属性”编辑器，但是其中的代码让你感到困惑，请尝试在“活动”框中输入比你的章节列表多一个数字。我的章节有12个，我在那里放了“13”，这对我起作用了。

- Steve

Answer 7

如果您查看代码中面板组的开头，请查找此内容。

<div id="collapseOne1" class="panel-collapse collapse in"> 

如果你只是移除 "in"，它会在页面加载时关闭面板。

- user6236374