twitter-bootstrap 在大分辨率下禁用 Bootstrap 3 折叠手风琴中的切换选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28108288/
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
Disable toggle option in Bootstrap 3 collapse accordion on large resolutions
提问by imag
Can the toggle functionality on Bootstrap collapse accordion be disabled only on larger resolutions?
Bootstrap 折叠手风琴上的切换功能只能在较大的分辨率下禁用吗？
The goal is to have the accordion collapsed on small resolutions with the option to toggle states, and expanded on large resolutions with no option to toggle states. What would be the best way to use Bootstrap built in functionality to achieve this?
目标是让手风琴在具有切换状态选项的小分辨率下折叠，并在没有切换状态选项的大分辨率上展开。使用 Bootstrap 内置功能来实现这一目标的最佳方法是什么？
I have made a Fiddle demo with what I have now. I'm not good with JS.
我用我现在的东西做了一个 Fiddle 演示。我不擅长 JS。
JSFiddle DEMO: http://jsfiddle.net/1crojp98/1/
JSFiddle 演示：http: //jsfiddle.net/1crojp98/1/
HTML:
HTML:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-sm-6">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title text-center">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Panel 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo.</p>
</div>
</div>
</div>
<div class="panel panel-default col-sm-6">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title text-center">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Panel 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo.</p>
</div>
</div>
</div>
</div>
JavaScript:
JavaScript:
$(document).ready(function(){
if ($(window).width() <= 768){
$('.panel-collapse').removeClass('in');
}
});
$(window).resize(function(){
if ($(window).width() >= 768){
$('.panel-collapse').addClass('in');
}
if ($(window).width() <= 768){
$('.panel-collapse').removeClass('in');
}
});
回答by Alex Todef
That's possible. You should just stop the click event's propagation:
那是可能的。您应该停止点击事件的传播：
$('a[data-toggle="collapse"]').click(function(e){
if ($(window).width() >= 768) {
e.stopPropagation();
}
});
I've updated your code on jsFiddle http://jsfiddle.net/1crojp98/2/
我已经在 jsFiddle http://jsfiddle.net/1crojp98/2/上更新了你的代码
But this code will disable the possibility to both collapse and open panels (only for larger resolutions, but anyway).
但是此代码将禁用折叠和打开面板的可能性（仅适用于较大的分辨率，但无论如何）。
回答by Rolleric
You could just hide the link in the larger resolutions, and show a bare title instead, e.g. within the panel-heading:
您可以在更大的分辨率下隐藏链接，并显示一个空标题，例如在面板标题中：
<h4 class="panel-title text-center">
<a class="hidden-sm hidden-md hidden-lg" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Panel 1
</a>
<div class="hidden-xs">
Panel 1
</div>
</h4>
