jQuery 手风琴展开所有 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2558553/
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 expand all div
提问by user305912
Is it possible to expand all components when page is load or when an event occurs? Thanks!!
是否可以在页面加载或事件发生时展开所有组件？谢谢！！
回答by ivan-ivory
Simply use this
简单地使用这个
$('#accordion .ui-accordion-content').show();
回答by Dustin Laine
No, if you are referring to accordion as your tag states. From jQuery.
不，如果您在标签上说的是手风琴。来自 jQuery。
NOTE: If you want multiple sections open at once, don't use an accordion
注意：如果您想一次打开多个部分，请不要使用手风琴
回答by maxisam
I would recommend this plugin Multi-open Accordion
我会推荐这个插件Multi-open Accordion
// this will make the second tab by default opened (index starts from 0)
$('#multiAccordion').multiAccordion({active: 1 });
// [ OR ]
// supports multiple tabs to be opened by default
$('#multiAccordion').multiAccordion({active: [1, 2, 3] });
// show all tabs
$('#multiAccordion').multiAccordion({active: 'all' });
// hide all tabs
$('#multiAccordion').multiAccordion({active: 'none' });
// you can set the options as any jQuery UI plugin using option method
$('#multiAccordion').multiAccordion('option', 'active', 'all');
回答by atmelino
I like this implementation of a toggle box:
我喜欢这个切换框的实现：
http://jsfiddle.net/kevinPHPkevin/mZhTY/107/
http://jsfiddle.net/kevinPHPkevin/mZhTY/107/
<div class="toggle-box">
<div class="toggle-title">Toggle 1</div>
<div class="toggle-content">
<p>text1.</p>
</div>
<div class="toggle-title">Toggle 2</div>
<div class="toggle-content">
<p>text2.</p>
</div>
<div class="toggle-title">Toggle 3</div>
<div class="toggle-content">
<p>text3</p>
</div>
</div>
Found this at
在
I can't make a jQuery UI accordion tab change colors when used (like a:visited), can I?
回答by Oops
It's been 9 years since this question was asked. But I found the below solution to open all the accordion divs by default. Here I used slideDown()method to show all the div contents.
问这个问题已经9年了。但我发现以下解决方案可以默认打开所有手风琴 div。这里我使用了slideDown()方法来显示所有的 div 内容。
$(function () {
$("#accordion").accordion({
header: "> div > h3",
collapsible: true,
heightStyle: "content"
});
jQuery('#accordion h3.ui-accordion-header').next().slideDown();
});
回答by timbck2
I know I'm answering a 2-year-old question, but none of the workarounds or alternate accordion plugins worked for me, so I came up with a devastatingly simple workaround: just destroy the accordion on click of an "expand all" link, and re-initialize it on click of a "collapse all" link. Something like this:
我知道我在回答一个 2 年前的问题，但没有一种变通方法或备用手风琴插件对我有用，所以我想出了一个非常简单的解决方法：只需单击“全部展开”链接即可销毁手风琴，然后单击“全部折叠”链接重新初始化它。像这样的东西：
<script type="text/javascript">
function accordionInit() {
$("#accordion").accordion();
}
function accordionDestroy() {
$("#accordion").accordion("destroy");
}
$(function() {
accordionInit();
});
</script>
The expand all and collapse all links would look like this:
全部展开和折叠所有链接如下所示：
<a onClick="accordionDestroy()">Expand all</a> | <a onClick="accordionInit()">Collapse all</a>
回答by SpYk3HH
Lol, many answers on here, but the easiest solution doesn't seem to be. The answer is "yes" and "no". You can't use the "traditional" command, however you can use the "classes" and write the JS yourself, which is SUPER SIMPLE!
大声笑，这里有很多答案，但最简单的解决方案似乎不是。答案是“是”和“否”。您不能使用“传统”命令，但是您可以使用“类”并自己编写 JS，这非常简单！
Just make your own Accordion using jQueryUI's classes and a little bit of JS and you're good to go. It's VERY easy and maintains with your jQueryUI ThemeRoller. If you want the "x-tra" options the "official accorrdion widget" provides, you can manage all of them with either a little more CSS or JS. Really Not that hard. Below is a link to the working example of the code I will post. All I simply did was copy their classes to my HTML layout verbatim. The HTML is still laid out just like any other jQueryUI accordion, except we apply the classes manually instead of letting jQuery do it. Look below to see what I mean.
只需使用 jQueryUI 的类和一点点 JS 制作您自己的手风琴，就可以了。使用您的 jQueryUI ThemeRoller 进行维护和维护非常简单。如果您想要“官方手风琴小部件”提供的“x-tra”选项，您可以使用更多的 CSS 或 JS 来管理所有这些选项。真的没那么难。下面是我将发布的代码的工作示例的链接。我所做的只是将他们的类逐字复制到我的 HTML 布局中。HTML 仍然像任何其他 jQueryUI 手风琴一样布局，除了我们手动应用类而不是让 jQuery 来做。看看下面，看看我的意思。
Or of course you can get this xtra, jquery-theme ready plugin
或者当然你可以得到这个 xtra, jquery-theme ready plugin
jsFiddle
js小提琴
The HTML
HTML
<div id="StickyNotes">
<div class="container">
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
Section 1
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
Section 2
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
Section 3
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
Section 4
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</div>
</div>
The JavaScript
JavaScript
$(function() {
$("#accordion > h3").on("click", function(e) {
$(this).next().slideToggle(function(e) {
if ($(this).is(":visible")) {
$(this).addClass("ui-accordion-content-active")
.prev().toggleClass("ui-corner-all ui-corner-top").addClass("ui-accordion-header-active ui-state-active")
.children(".ui-accordion-header-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s");
}
else {
$(this).removeClass("ui-accordion-content-active")
.prev().toggleClass("ui-corner-all ui-corner-top").removeClass("ui-accordion-header-active ui-state-active")
.children(".ui-accordion-header-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s");
}
});
})
.hover(function(e) { $(this).toggleClass("ui-state-hover"); });
})
回答by David Andersson
To make it unobtrusive and be hidden only if the visitor has javascript I'd put
为了使它不显眼，并且只有在访问者有 javascript 时才被隐藏，我会放
CSS:
CSS：
#divToBeHidden { display: block; }
In <head>:
在<head>：
$('#divToBeHidden').hide();
Bottom of <body>:
底部<body>：
$(function() {
$("#divToBeHidden").show(); //Or whatever means you'd prefer of showing the content
});
回答by Nick Craver
You can do it in the document.readyevent jQuery provides, like this:
您可以在document.readyjQuery 提供的事件中执行此操作，如下所示：
CSS:
CSS：
.myClassToBeHidden { display: none; }
jQuery:
jQuery：
$(function() {
$(".myClassToBeHidden").slideDown();
});
If you mean with the accordion control from jQuery UI then...you shouldn't use accordion, expanding all isn't what it's for and they advise against this as it causes other issues.
如果您的意思是使用 jQuery UI 的手风琴控件，那么...您不应该使用手风琴，展开所有内容并不是它的用途，他们建议不要这样做，因为它会导致其他问题。
回答by mahmoodels
I know that is realy too late but i found the solution today. Just simply use
我知道这真的太晚了，但我今天找到了解决方案。只需简单地使用
function expandAll() {
$('#accordion h3').removeClass('ui-state-default')
.addClass('ui-state-active')
.removeClass('ui-corner-all')
.addClass('ui-corner-top')
.attr('aria-expanded', 'true')
.attr('aria-selected', 'true')
.attr('tabIndex', 0)
.find('span.ui-icon')
.removeClass('ui-icon-triangle-1-e')
.addClass('ui-icon-triangle-1-s')
.closest('h3').next('div')
.show();}
