Question

当网站宽度小于676px时，目标是从制表符切换到手风琴式折叠。我们正在使用Bootstrap。

我们将分别用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>

Answer 1

就我而言，只是将标签内容复制到隐藏的手风琴中效果很好。

以下是我提取到小插件的来源 - Bootstrap Tab Collapse

Answer 2

我在this jsfiddle上试了一下但是让两个插件一起工作似乎很复杂。

可能更好地选择其中一个插件，只使用此插件的类和JS，然后实现自己的触发器来完成默认行为。

我认为崩溃插件的手风琴行为需要.accordion-group > .collapse.in结构才能正常工作 - 如果你不使用自己的JS。

Answer 3

我最终将标签触发器嵌套在带有选项卡式内容（而不是上面的列表）的div中，并使用css将它们定位为全屏视图的标签。只要数据切换和数据目标到位，效果就不理想了。

Answer 4

不确定它是否有帮助，但您可以使用window.onresize = function（）{}并检查主容器的宽度。当它小于某个宽度时，您可以使用js替换内容。

从标签切换到折叠以进行响应

4 个答案: