使用 Bootstrap 2.3.2 我有一个带有单个面板的 Accordion ,该面板在加载页面时打开。
<div class="accordion" id="refine">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
Title
</a>
</div>
<div id="refine-search" class="accordion-body collapse in">
<div class="accordion-inner">
Test text....
</div>
</div>
</div>
该网站是完全响应的。当切换到移动屏幕尺寸 [@media (max-width: 979px)] 我希望 Accordion 面板自动关闭,即实际上我希望 div 细化搜索线更改为“折叠”。
在移动模式下, Accordion 必须仍然工作,例如用户可以单击 Accordion 标题,面板将展开,因此我不希望重复的 div 使用 .hidden-desktop 实用程序类等关闭面板。
我一直在寻找答案 - 任何人都可以帮忙吗?
最佳答案
所以我最终想出了如何做到这一点,并发布它以防它对任何人有帮助。
将 HTML 更改为:
<div class="accordion" id="refine">
<div class="hidden-phone">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
<legend>
<h2>Refine your search</h2></legend>
</a>
</div>
</div>
<div class="visible-phone">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
<legend>
<h2>Refine your search (press to reveal)</h2></legend>
</a>
</div>
</div>
<div id="refine-search" class="accordion-body collapse in">
<div class="accordion-inner">
Test text....
</div>
</div>
</div>
然后在文件中使用这个JS。
$(window).bind('resize load', function() {
if ($(this).width() < 767) {
$('#refine-search').removeClass('in');
$('#refine-search').addClass('out');
} else {
$('#refine-search').removeClass('out');
$('#refine-search').addClass('in');
}
});
关于twitter-bootstrap - 切换到手机屏幕尺寸时自动关闭 Bootstrap Accordion 面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18109627/