6

目標は、サイトの幅が676ピクセル未満の場合に、タブからアコーディオンスタイルの折りたたみに切り替えることです。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>
4

4 に答える 4

11

私の場合、タブのコンテンツを非表示のアコーディオンにコピーするだけでうまくいきました。

これが私が小さなプラグインに抽出したソースです-ブートストラップタブの折りたたみ

于 2013-07-19T17:42:50.483 に答える
1

このjsfiddleを少し試してみましたが、両方のプラグインを一緒に動作させるのは複雑なようです。

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

.accordion-group > .collapse.in独自のJSを使用しない場合、collapseプラグインのアコーディオン動作には構造が適切に機能する必要があると思います。

于 2013-02-15T23:46:03.497 に答える
0

I ended up nesting the tab triggers inside one div with the tabbed content (instead of a list above) and using css to position them like tabs for the full screen view. Not ideal but works as long as the data-toggle and data-target are in place.

于 2013-02-19T19:07:35.560 に答える
0

それが役立つかどうかはわかりませんが、window.onresize = function（）{}を使用して、メインコンテナの幅を確認できます。幅が狭い場合は、jsを使用してコンテンツを置き換えることができます。

于 2013-03-22T11:33:44.313 に答える