ブートストラップレスポンシブル折りたたみサブメニューは、最初の折りたたみ時に固定高さを持っています

Question

この問題は、私が知っているすべてのTwitter Bootstrapのバージョンで展示することができます。だから、私はnavbarを持って、画面が小さくなると、それは折りたたみ可能なトレイになります。この動作は、ブートストラップデモサイトで見ることができます。私はまた、サブナビゲーションを持っています。問題は、最初の折りたたみ時に、折りたたみ可能なものが明示的な高さセットを取得することです。もう一度閉じると展開すると、折りたたみ可能なものはheight:auto;

です。サブメニュー項目をクリックすると、ドロップダウンが展開されますが、高さが明示的に設定されているためオーバーフローします。

私試みたソリューションを追加しました：

$(function() { 
    $('.nav-collapse').on({ 
    shown: function() { 
     $(this).css('height', 'auto'); 
    }, 

    hidden: function() { 
     $(this).css('height', '0px'); 
    } 
    }); 
}); 

をこれは私がそのコードを削除したし、それはまだ同じ効果があり、全く影響を与えていないようです。 JSフィドルが助けになるならば、私はそれを提供してもうれしいですが、あなたはBootstrapデモサイトでこれをすべて見ることができます。

ありがとうございます。 チャールズです。

Answer 1

私は少し気になりましたが、検索したところ、.collapseクラスを.nav-collapse要素に追加することで問題を解決できることがわかりました。私達はちょうどMEHを言うそれらの時間の

Working demo (jsfiddle)

一つ..私は（Responsive navbarを参照）手紙にドキュメントに従っている必要があります。後世のために

<div class="nav-collapse collapse"> 
    <!-- .nav, .navbar-search, .navbar-form, etc --> 
</div> 

---

を：

この問題のおかげで見つけた：https://github.com/twitter/bootstrap/issues/3788

私はそれが本当に関連しているかどうかわからないんだけど、私のデバッグはとにかくリセット最初の遷移の高さの問題（source）を示した：あなたはあなたのデモサイトやJSフィドルへのリンクを提供しなければならない

$.support.transition && this.$element[dimension](this.$element[0][scroll]) 

Answer 2

ブートストラップでは、折りたたみ要素の初期化時に要素スタイルの高さを280pxに設定しています。

私は

$("#avail_detail").collapse(); 
$("#avail_detail").css("height","auto"); 

）右（.collapseするために私の呼び出しの後に私の準備（）関数の中で、このjQueryの行を追加し、私は期待どおり、今のものが動作します。