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

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

解决方法

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

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

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