用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 文档的设置，你可以简单地在h3标题下面的内容div上放置<div style="display: none"> 。 这将在页面加载时隐藏手风琴中的所有内容。

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