twitter-bootstrap Bootstrap 数据切换在第二次点击后折叠 div，而不是第一次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39290431/
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 data-toggle collapses div after second click, not first
提问by Pupkin
I have the simple examplewith Bootstrap and toggling divs by click. Here is markup:
我有一个带有 Bootstrap 和通过单击切换 div的简单示例。这是标记：
<div class="accordion-heading">
<a class="accordion-toggle"
data-toggle="collapse"
data-parent="#accordion2"
href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body">
<div class="span6">
<div class="well well-small">
<div class="accordion-toggle">
...some text...
</div>
</div>
</div>
<div class="span2"></div>
</div>
When user clixks link with title 'Open!' underlying div expands or collapses. Div is expanded initially and when user clicks first time it has no effect. Then if user clicks second time, div collapses.
当用户点击标题为“打开！”的链接时 底层 div 展开或折叠。Div 最初是展开的，当用户第一次单击时它不起作用。然后，如果用户第二次单击，div 将折叠。
In the original examplediv is collapsed initially but I would like it to be opened. How could I fix the problem?
在原始示例中div 最初是折叠的，但我希望它被打开。我怎么能解决这个问题？
回答by Jyoti Pathania
Just add class 'collaspe in' to class="accordion-body".
只需将类 'collaspe in' 添加到 class="accordion-body"。
Check example code at CODEPEN
在CODEPEN检查示例代码
HTML:
HTML：
<div class="accordion-heading">
<a class="accordion-toggle"
data-toggle="collapse"
data-parent="#accordion2"
href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="span6">
<div class="well well-small">
<div class="accordion-toggle">
...some text...
</div>
</div>
</div>
<div class="span2"></div>
</div>
I hope this will fix your issue. Enjoy :)
我希望这会解决您的问题。享受 ：）
回答by Blake Neal
<a class="btn btn-primary" data-toggle="collapse" href="#collapsePanel" role="button" aria-expanded="false" aria-controls="collapsePanel">Collapse</a>
<div id="collapsePanel" class="collapse show"><!-- Content Here --></div>
This will make it collapsible, but show the panel by default. When you click the Collapse button, it will collapse the panel on the first click.
这将使其可折叠，但默认显示面板。当您单击“折叠”按钮时，它将在第一次单击时折叠面板。
I'm only adding this here for if anyone is looking to do it either way. I found this link when searching for its inverse. Hope it helps!
我只是在这里添加这个，如果有人想要这样做的话。我在搜索它的逆时找到了这个链接。希望能帮助到你！
回答by Azamat
You should only call bootstrap.min.jsone. Make sure that you're calling bootstrap files only once in the <head>section.
If you're using Bootstrap with Laravel or any kind of framework, keep in mind that npm run devcompiles bootstrap js files in app.js. That could be the case.
你应该只调用bootstrap.min.js一个。确保在该<head>部分中只调用引导程序文件一次。如果你在 Laravel 或任何类型的框架中使用 Bootstrap，请记住npm run dev在app.js. 情况可能是这样。
回答by Nizamudheen At
<div id="collapseOne" class="accordion-body collapse">
This will also make it close by default and open when clicked
这也将使其默认关闭并在单击时打开
