目标是当网站宽度小于 676 像素时,从选项卡切换到手风琴样式折叠。我们正在使用引导程序。
我们将使用 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>
就我而言,只需将选项卡内容复制到隐藏的手风琴中效果很好。
这是我提取到小插件的源代码 -Bootstrap 选项卡折叠 https://github.com/okendoken/bootstrap-tabcollapse
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)