我们的目标是当站点宽度小于676 px时,从标签切换到折叠样式。我们使用的是Bootstrap。
我们将用css分别隐藏ul.nav-tabs和a. accordion-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>
4条答案
按热度按时间zbdgwd5y1#
在我的情况下,只是复制标签内容到隐藏的 accordion 工作得很好。
这里是我提取到小插件的源代码-Bootstrap Tab Collapse
evrscar22#
我在this jsfiddle上试了一下,但是让两个插件一起工作似乎很复杂。
最好选择其中一个插件,只使用这个插件的类和JS,然后实现你自己的触发器来完成默认行为。
我认为折叠插件的折叠行为需要
.accordion-group > .collapse.in
结构才能正常工作--如果你不使用自己的JS的话。q0qdq0h23#
最后,我把标签触发器嵌套在一个带有标签内容的div中(而不是上面的列表),并使用css像全屏视图的标签一样定位它们。虽然不理想,但只要数据切换和数据目标在适当的位置就可以工作。
w1e3prcc4#
不确定是否有帮助,但你可以使用window.onresize = function(){}检查主容器的宽度。当它小于某个宽度时,你可以使用js替换内容。