twitter-bootstrap 从选项卡切换到折叠以进行响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14904109/
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
Switch from tabs to collapse for responsive
提问by Laura
The goal is to switch from tabs to an accordion style collapse when the site is less than 676px wide. We are using Bootstrap.
目标是在站点宽度小于 676 像素时从选项卡切换到手风琴样式折叠。我们正在使用 Bootstrap。
We'll hide ul.nav-tabs and a.accordtion-toggle respectively with css. The tabs work here, but the a.accordion-toggle aren't working. Any ideas?
我们将分别用 css 隐藏 ul.nav-tabs 和 a.accordtion-toggle。选项卡在这里工作，但 a.accordion-toggle 不起作用。有任何想法吗？
<ul class="nav nav-tabs" id="myTab" data-tabs="tabs">
<li class="active"><a href="#panel1" data-toggle="tab">Panel 1</a></li>
<li class="active"><a href="#panel2" data-toggle="tab">Panel 2</a></li>
</ul>
<a class="accordion-toggle" data-toggle="collapse" data-target="#panel>Panel 1</a>
<div class="tab-pane collapse" id="panel1">
Panel 1 Content
</div>
<a class="accordion-toggle" data-toggle="collapse" data-target="#pane2>Panel 2</a>
<div class="tab-pane collapse" id="panel2">
Panel 2 Content
</div>
<script>
jQuery(document).ready(function ($) {
if (document.documentElement.clientWidth < 767) {
$('#myTab a').click(function (e) {
e.preventDefault();
}
$(".collapse").collapse();
}
});
</script>
采纳答案by Sherbrow
I tried a bit on this jsfiddlebut it seems complicated to make both plugins work together.
我在这个 jsfiddle上尝试了一些，但是让两个插件一起工作似乎很复杂。
It might be better opting for one of the plugin, using only the classes and JS of this plugin, and then implement your own triggers to complete the default behavior.
最好选择其中一个插件，只使用这个插件的类和 JS，然后实现自己的触发器来完成默认行为。
I think the accordion behavior of the collapse plugin needs the .accordion-group > .collapse.instructure to work properly - if you don't use your own JS.
我认为折叠插件的手风琴行为需要.accordion-group > .collapse.in结构才能正常工作 - 如果您不使用自己的 JS。
回答by Okendoken
In my case just copying tabs content into hidden accordion worked well.
在我的情况下，只是将标签内容复制到隐藏的手风琴中效果很好。
Here is the source I extracted to small plugin - Bootstrap Tab Collapse
这是我提取到小插件的源代码 - Bootstrap Tab Collapse
回答by Laura
I ended up nesting the tab triggers inside one div with the tabbed content (instead of a list above) and using css to position them like tabs for the full screen view. Not ideal but works as long as the data-toggle and data-target are in place.
我最终将选项卡触发器嵌套在一个带有选项卡式内容（而不是上面的列表）的 div 中，并使用 css 将它们定位为全屏视图的选项卡。不理想，但只要数据切换和数据目标就位就可以工作。
回答by Pablo Jomer
Not sure if it helps but you could use window.onresize = function() {} and check for the width of your main container. When it is less than some width you could replace the content using js.
不确定它是否有帮助，但您可以使用 window.onresize = function() {} 并检查主容器的宽度。当它小于某个宽度时，您可以使用 js 替换内容。
