0

私はそのようなコードスニペットを持っています:

 <div class="alert alert-info">Today's news
        <div class="pull-right"><a class="btn btn-small" data-toggle="collapse" data-target="#newsDiv"><i class="icon-chevron-down"></i></a></div>
    </div>
    <div id="newsDiv" class="collapse in">
        Today something happened<br>
        Also yesterday happened<br>
        Maybe tomorrow<br>
    </div>

jsFiddle: http://jsfiddle.net/gfUXW/

この動作が必要です: ユーザーが電話 (幅 480 ピクセル以下) でアクセスすると折りたたみが閉じられ、ユーザーがより大きなデバイスでアクセスすると折りたたみが自動的に開きます。

レスポンシブにするには、CSS ルールに従って行う必要があります。しかし、「visible-phone」や「collapse in」クラスなどのブートストラップのレスポンシブ クラスに参加する方法がわかりませんでした。

4

2 に答える 2

0

折りたたみは JavaScript プラグインなので、答えは JavaScript を使用することにあると思います。

クラスを削除するinと、デフォルトで折りたたみが閉じたままになります。これは知っておくと便利です。ドキュメントの準備ができたら、これを確認できます。

  if ($(window).width() > 480) {
    $(".collapse").collapse('show');   
  }

メソッドはドキュメントにあります: Bootstrap Collapse

さまざまな画面幅で実行をクリックして、実際の動作を確認してください: http://jsfiddle.net/LaAWc/1/

これを常にチェックしたい場合は、チェックを続けるためにタイマーでポーリングする必要があります。興味がある場合は、画面解像度が変更された場合に jquery で検出する方法を参照してください。

于 2013-07-12T18:33:39.263 に答える