twitter-bootstrap Bootstrap - 无法让我的手风琴在默认情况下保持关闭？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24785622/
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
Bootstrap - Cant get my Accordion to stay closed on default?
提问by Zola
I have a single accordion item that I am using for a read more / less link on a page.
我有一个手风琴项目，我将它用于页面上的阅读更多/更少链接。
The purpose of this is to click it to read more, and a few paragraphs will follow.
这样做的目的是点击阅读更多，后面会介绍几段。
I have this working, but I need it to stay closed when the page loads, at the moment the page loads with the item open.
我有这个工作，但我需要它在页面加载时保持关闭，在页面加载时打开项目。
What can I add to fix this?
我可以添加什么来解决这个问题？
<div class="accordionMod panel-group">
<div class="accordion-item">
<h4 class="accordion-toggle">Read More / Less</h4>
<section class="accordion-inner panel-body">
<p>more info.</p>
<h4 class="title">More titles</h4>
<p>more content</p>
</section>
</div>
</div>
回答by a.guerrero.g87
I think this will work
我认为这会奏效
<div class="accordion" id="myAccordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Content
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo">
Title
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Content
</div>
</div>
</div>
</div>
if you add the class into accordion-body collapseit will be open by default.
如果您将类添加in到accordion-body collapse它将默认打开。
回答by KyleMit
Sounds like you don't need an accordion, which has multiple panels, only one of which can open at a time. Instead, just use collapsewhich allows you to toggle the visibility of a section of the page.
听起来你不需要手风琴，它有多个面板，一次只能打开一个。相反，只需使用collapse它允许您切换页面部分的可见性。
Panel Visibility
面板可见性
From the collapse docs:
从折叠文档：
The collapse plugin utilizes a few classes to handle the heavy lifting:
.collapsehides the content.collapse.inshows the content.collapsingis added when the transition starts, and removed when it finishes
折叠插件利用几个类来处理繁重的工作：
.collapse隐藏内容.collapse.in显示内容.collapsing在过渡开始时添加，并在完成时移除
Thus, to start off collapsed, just make sure your extra content has the class collapseand not in
因此，要开始折叠，只需确保您的额外内容具有类collapse而不是in
Simple HTML
简单的 HTML
To use collapse, you really just need to specify a data-toggle="collapse"and then point the collapse to the css selector of the section you would like to toggle using data-target.
要使用折叠，您实际上只需要指定 adata-toggle="collapse"然后将折叠指向要使用data-target.
Here's a bare bones example that just exposes the collapsing functionality:
这是一个仅公开折叠功能的基本示例：
<a data-toggle="collapse" data-target="#ReadMoreInfo" href="#">
Read More / Less
</a>
<div id="ReadMoreInfo" class="collapse">
<p> More Info Here </p>
</div>
HTML with Bootstrap classes
带有 Bootstrap 类的 HTML
All the other bootstrap classes are just to help make the collapsible panel looklike a collapsible panel. I would recommend formatting them like this or doing a lot of custom CSS work. Even if you wanted to do the CSS yourself, starting off with this template and then overriding the styles would be best.
所有其他引导类只是为了帮助使可折叠面板看起来像可折叠面板。我建议像这样格式化它们或做很多自定义 CSS 工作。即使你想自己做 CSS，从这个模板开始，然后覆盖样式也是最好的。
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse"
data-target="#ReadMoreInfo"
href="#ReadMoreInfo">
Read More / Less
</a>
</h4>
</div>
<div id="ReadMoreInfo" class="panel-collapse collapse">
<div class="panel-body">
<p>more info.</p>
<h4 class="title">More titles</h4>
<p>more content</p>
</div>
</div>
</div>
Working Demo in jsFiddle
jsFiddle 中的工作演示
Screenshot:
截图：
回答by ArtfulDodger
Removing the inclass did not work for me in my case(though normally it should). I was just looking for the answer to this question yesterday. I used this to make the accordion default to close:
in在我的情况下，删除课程对我不起作用（尽管通常应该这样做）。我昨天只是在寻找这个问题的答案。我用它来使手风琴默认关闭：
$( document ).ready(function() {
$('.collapse').collapse({
toggle: false
});
});
See also this question on:
另请参阅以下问题：
回答by HamidReza
if accordion is with icon, add collapsed class name to :
如果手风琴带有图标，则将折叠的类名添加到：
<a class="accordion-toggle accordion-toggle-styled collapsed" >
and add collapse class name to:
并将折叠类名称添加到：
<div id="collapse0" class="panel-collaps collapse">
complete code is:
完整的代码是：
<div class="panel-group accordion" id="accordion0">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle accordion-toggle-styled collapsed" data-toggle="collapse" data-parent="#accordion0" href="#collapse0">
Collapsible Header Text
</a>
</h4>
</div>
<div id="collapse_3_1" class="panel-collaps collapse">
<div class="panel-body">
<p> body text
</p>
</div>
</div>
</div>
</div>
