6

目标是在站点宽度小于 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>
4

4 回答 4

11

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

这是我提取到小插件的源代码 - Bootstrap Tab Collapse

于 2013-07-19T17:42:50.483 回答
1

我在这个 jsfiddle上尝试了一些，但让两个插件一起工作似乎很复杂。

最好选择其中一个插件，仅使用该插件的类和 JS，然后实现您自己的触发器以完成默认行为。

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

于 2013-02-15T23:46:03.497 回答
0

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

于 2013-03-22T11:33:44.313 回答
0

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

于 2013-02-19T19:07:35.560 回答