从标签切换到折叠以进行响应 [英] Switch from tabs to collapse for responsive

问题描述

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

The goal is to switch from tabs to an accordion style collapse when the site is less than 676px wide. We are using Bootstrap.

我们将分别用css隐藏ul.nav-tabs和a.accordtion-toggle。选项卡在这里工作，但a.accordion-toggle不起作用。有什么想法？

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?

<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>

推荐答案

我试过了关于这个jsfiddle ，但使两个插件一起工作似乎很复杂。

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

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.

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

I think the accordion behavior of the collapse plugin needs the .accordion-group > .collapse.in structure to work properly - if you don't use your own JS.

这篇关于从标签切换到折叠以进行响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！