Javascript jquery 手风琴默认在页面加载时折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6575610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery accordion collapsed by default on page load
提问by DotnetSparrow
I am using JQuery UI accordion in my page. I have following Javascript code on my page load:
我在我的页面中使用 JQuery UI 手风琴。我的页面加载中有以下 Javascript 代码：
$(function() {
$("#accordion").accordion({
active: false,
autoHeight: false,
navigation: true,
collapsible: true
});
});
When the page loads all tabs are open for few seconds and then collapse. May be its loading effect. How can I make Jquery UI accordion collapsed on page load. Please suggest
当页面加载时，所有选项卡都会打开几秒钟然后折叠。可能是它的加载效果。如何让 Jquery UI 手风琴在页面加载时折叠。请建议
回答by Mrchief
Although not a direct answer, maybe you can render it hidden and then show it when its created:
虽然不是直接的答案，但也许您可以将其隐藏，然后在创建时显示：
$("#accordion").accordion({
active: false,
autoHeight: false,
navigation: true,
collapsible: true,
create: function(event, ui) { $("#accordion").show(); }
});
Update:This fiddle works for me: http://jsfiddle.net/47aSC/6/
更新：这个小提琴对我有用：http: //jsfiddle.net/47aSC/6/
回答by mat0r
For me this works:
对我来说这有效：
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
autoHeight: true,
active: false
});
});
回答by Kevin Stricker
It's probably loading something near the end of the page slowly. If you can't fix that, you could try declaring the element having display:noneapplied to it in css, then:
它可能正在缓慢地加载接近页面末尾的内容。如果你不能解决这个问题，你可以尝试display:none在 css 中声明已应用于它的元素，然后：
$("#accordion").show().accordion({
active: false,
autoHeight: false,
navigation: true,
collapsible: true
});
There could be a cleaner way of doing that (as @Mrchief suggests), but I don't think .accordion()formats hidden elements nicely. You'll have to test.
可能有一种更简洁的方法来做到这一点（正如@Mrchief 所建议的那样），但我认为不能.accordion()很好地格式化隐藏元素。你必须测试。
回答by EhsanSia
The best solution is:
最好的解决办法是：
open jquery.ui.accordion.js and edit lines 29 and 31 (by the way I'm using 1.10.4).
打开 jquery.ui.accordion.js 并编辑第 29 和 31 行（顺便说一下，我使用的是 1.10.4）。
Edit line 29 to Active: 100,Edit line 31 to collapsible: true,
将第 29 行编辑为Active: 100，将第 31 行编辑为可折叠：true，
This way you don't need to write any script or function in the header of the page. By setting Activeto a high number (for example 100) you are saying that 100th h3 tag is active (which basically doesn't exist).
这样您就不需要在页面的标题中编写任何脚本或函数。通过将Active设置为一个较高的数字（例如 100），您表示第 100 个 h3 标签处于活动状态（基本上不存在）。
The collapsible: true says that all open h3 tags are collapsible.
该可折叠：真说，所有打开的H3标签是可折叠的。
It solves the problem completely.
它完全解决了问题。
回答by Bhargav Chudasama
$(document).ready(function() {
$('.collapse').collapse({
toggle: false
});
});
This will set all .collapseclasses in DOM to close, but only once the DOM has finished loading.
这会将.collapseDOM 中的所有类设置为关闭，但只有在 DOM 完成加载后才会关闭。
回答by Sheo Dayal Singh
// We can also use the below code to collapse accordian on the page load and it should use when we are using bootstrap 2.0
// 我们也可以使用下面的代码在页面加载时折叠手风琴，当我们使用 bootstrap 2.0 时应该使用它
$(document).ready(function () {
if ($("#accordianId").length>0) {
$("#accordianId").trigger("click");
}
});
Other wise we should use below code for bootstrap 3.0
否则我们应该使用下面的代码来引导 3.0
$( "#accordianId" ).accordion( "option", "active", 0 );
