タブから折り畳んで反応して反応する

目標は、サイトが676px未満のときにタブからアコーディオンスタイルの折りたたみに切り替えることです。私たちはBootstrapを使用しています。タブから折り畳んで反応して反応する

ul.nav-tabsとa.accordtion-toggleをそれぞれcssで非表示にします。タブはここでは機能しますが、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>

出典

2013-02-15 Laura

貼り付けコードが属性に引用符が欠落しており、JSは何もしない - ここで

は、私は小さなプラグインに抽出されたソースです。 '.accordion-toggle [data-target]'の1つも不完全です。 – Sherbrow

タブプラグインの代わりに '.nav-tabs'で折り畳みプラグインを使うことを考えましたか？ – Sherbrow

私はそれは、両方のプラグインが一緒にを動作させるために複雑なようだthis jsfiddleにビットを試みたが。

このプラグインのクラスとJSのみを使用してプラグインの1つを選択し、独自のトリガーを実装してデフォルトの動作を完了させる方がよい場合があります。

私は崩壊プラグインのアコーディオンの動作は正常に動作し.accordion-group > .collapse.in構造を必要だと思います - あなたはあなた自身のJSを使用しない場合。

出典

2013-02-15 23:46:03 Sherbrow