CSS Bootstrap 折叠手风琴 - 默认展开/折叠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18826362/
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 Collapse Accordion - Default Expand/Collapse?
提问by Westyfield2
I'm using Twitter Bootstrap, with jQuery.
我正在使用 Twitter Bootstrap 和 jQuery。
According to the bootstrap docs, if you want the collapsible element open as default you add the additional class "in". And if you want the collapsible element collapsed as default you style the height to 0px.
根据引导程序文档，如果您希望可折叠元素默认打开，则添加额外的类“in”。如果您希望可折叠元素默认折叠，请将高度设置为 0px。
That all works well and good.
这一切都很好。
I would like to use a Media Query to set the element open as default on large screens, and collapsed as default on small screens (and then click to toggle on both)...
我想使用媒体查询将元素设置为在大屏幕上默认打开，在小屏幕上默认折叠（然后单击以在两者上切换）...
My HTML:
我的 HTML：
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
Heading text.
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
(Click to show/hide)
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum.
</div>
</div>
</div>
</div>
My CSS:
我的CSS：
@media (min-width: 768px) {
.collapse {
height: auto;
}
}
@media (max-width: 767px) {
.collapse {
height: 0px;
}
}
This works fine until you start clicking it…
这工作正常，直到您开始单击它...
Below 767px the element is collapsed as default, and above the element is open as default. Correct.
低于 767px 的元素默认折叠，高于 767px 的元素默认打开。正确的。
Below 767px you can click to open the element, and it opens fine. Click again and it hides. Rinse and repeat. Correct.
低于 767px 你可以点击打开元素，它打开得很好。再次单击它会隐藏。冲洗并重复。正确的。
Above 767px when you click to collapse the element, it closes but then re-opens itself. Click it again and it closes and stays closed this time. Click again and it opens fine. Click again and it closes fine.
当您单击以折叠元素时超过 767 像素，它会关闭但随后会重新打开。再次单击它，它会关闭并保持关闭状态。再次单击，它打开正常。再次单击，它关闭正常。
So for some reason above 767px (when the element is open as default), it takes two clicks to make it stay collapsed without re-opening itself, and then it works fine.
因此，出于某种原因，高于 767px（当元素默认打开时），需要单击两次才能使其保持折叠状态而不重新打开自身，然后它就可以正常工作了。
Thoughts?
想法？
回答by grim
You can't achieve this type of behavior only with Media Queries as Twitter Bootstrap's Accordion looks for the .inclass in order to expand/collapse the respective .accordion-body.
您不能仅使用媒体查询来实现这种类型的行为，因为 Twitter Bootstrap 的手风琴会查找.in该类以展开/折叠相应的.accordion-body.
An option is to detect the window width on page load and then add the use Bootstrap's .collapse()method to show/hide the .accordion-body.
一个选项是在页面加载时检测窗口宽度，然后添加使用 Bootstrap 的.collapse()方法来显示/隐藏.accordion-body.
$(function(){
$(window).resize(function() { // Optional: if you want to detect when the window is resized;
processBodies($(window).width());
});
function processBodies(width) {
if(width > 768) {
$('.accordion-body').collapse('show');
}
else {
$('.accordion-body').collapse('hide');
}
}
processBodies($(window).width());
});
