2

私のサイトには (標準の) Twitter Bootstrap メニューがあります。ブラウザ ウィンドウを縮小したり、スマートフォンや iPad を使用したりすると、メニューが縮小され、右側にボタンが表示されます。1回押すと、メニューが開きます。もう一度押すと、閉じます。しかし、もう一度クリックしても開きません。コードはhttp://www.boajobs.comで確認できます。同様のメニューが Twitter Bootstrap サイトで問題なく動作するので、何か見逃していましたか? ありがとう。

4

1 に答える 1

3

.collapse使用している Bootstrap CSS の縮小版には、クラス内の CSS トランジションのルールがいくつかありません。これは、 bootstrap-collapse.jsプラグインが存在すると想定しています。プラグインがナビゲーション バーを折りたたむと、$.support.transition.endイベントのリスナーが追加されます。イベントがトリガーされることはないため、プラグインはロックされたtransitioning状態になり、今後のすべての呼び出しでショートサーキットが発生します。

必要な CSS トランジションを CSS ファイルに追加することで、動作を修正できます。

関連する Bootstrap CSS (v.2.1.1)

.collapse {
  position:relative;
  height:0;
  overflow:hidden;
  -webkit-transition:height 0.35s ease;
  -moz-transition:height 0.35s ease;
  -o-transition:height 0.35s ease;
  transition:height 0.35s ease;
}
.collapse.in {
  height:auto;
}

または、CSS トランジションが本当に必要ない場合は、JavaScript からbootstrap-transition.jsを除外できます。

于 2012-10-23T20:11:46.133 に答える