用CSS关闭jQuery UI Accordions

Question

有没有办法强制jQuery UI手风琴用CSS关闭，直到页面完成加载？我们在内容管理系统上使用它，每个页面需要花费大量的时间来加载。在页面加载完成之前，jQuery不会被触发，但是哪一点，所有的手风琴都已经扩展。它们会在页面加载后关闭，但我觉得让用户看到一大堆内容出现然后消失是令人困惑的。

Answer 1

.accordion({ ... })电话本身有一个选项：

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

active: false选项会在创建时关闭，而collapsible: true选项会使其生成，因此您可以在打开它后重新关闭它。

Answer 2

选项显示如何在关闭所有标签的情况下初始化手风琴。请参阅：http://jqueryui.com/demos/accordion/#option-active这意味着初始化代码为：

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

Answer 3

根据jQuery Accordion documentation的设置，您只需将<div style="display: none">放在 h3 标题下的内容 div 即可。这将在页面加载时隐藏手风琴中的所有内容。

Answer 4

您可以将其设置为：

.accordion-body{
    display: none;
}

我猜手风琴会在某个地方调用$ .show（或类似的），所以你不必担心再次显示它。再次，这是一个猜测，所以在我错了的情况下，你再次使用

使其可见

$('.accordion-body').css('display', 'block');
$('#accordion').accordion();

但是，如果你在dom load上调用.accordion()，你也可以尝试使用.load来解决它：

$('#accordion').load(function(){
    $(this).accordion();
});

Answer 5

您可以尝试这样的事情：

在CSS中，将样式应用于您用来调用手风琴的选择器：

.accordionSelector > div { display:none; }

然后在加载jQuery后将display更改回block：

$(".accordionSelector").accordion({...}).children("div").css("display","block");