jQueryを使用しているときの背景色のフラッシュ.slideToggle

Question

jQueryの.slideToggleを使用しているとき、.primary-navigationで背景色が優先されていますが、持続的ではありません。これは、アニメーション中に好ましい背景色を示しますが、アニメーションが完了したときにそのままにはなりません。私は頭を掻き続けるが、私はそれを理解することはできない。なぜこれが起こっているのか、どうやって解決するのか誰にも分かりますか？この問題は、最新のChrome、FF、iOS Safariで発生します。

EDIT：問題を解決したjsFiddleがあります：jsFiddleです。迅速な返信のためにscessorのおかげで！

HTML：

<header class="banner clearfix"> 
<h1 class="alpha">Site Title</h1> 
<nav class="primary-navigation-wrapper"> 
    <ul class="primary-navigation"> 
    <li><a href="#" id="current-page">Blog</a></li> 
    <li><a href="#">Archives</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 
</header> 

CSS：

.banner { 
    background-color: blue; 
} 

.banner h1 { 
    padding: 6px; 
    float: left; 
} 

h1.js-toggle-navigation { 
    float: right; 
    padding: 6px; 
    cursor: pointer; 
} 

.primary-navigation { 
    clear: both; 
    display: none; 
    background-color: red; 
} 

.primary-navigation li { 
    float: left; 
    display: block; 
} 

.primary-navigation a { 
    padding: 6px 0 6px 6px; 
    display: block; 
} 

jQueryの（1.7.2。）：

<script type="text/javascript"> 
    jQuery(document).ready(function($){ 
    /* prepend menu icon */ 
    $('.primary-navigation-wrapper').prepend('<h1 class="js-toggle-navigation">Menu</h1>'); 

    /* toggle nav */ 
    $(".js-toggle-navigation").on("click", function(){ 
     $(".primary-navigation").slideToggle(); 
     $(this).toggleClass("active"); 
    }); 
    }); 
</script> 

Answer 1

liのフローティングを終了する必要があります。例えば。クラスプライマリナビゲーションでulにCSS overflow: hidden;を追加します。

.primary-navigation { 
    overflow: hidden; 
    ... 
} 

またmy exampleを参照してください。 （私だけがメニューボタンずに、上マージンをも追加しました例えば、結果ラベルによって引き起こさjsfiddleでクリックすることができませんでした。）

Answer 2

あなたulは浮動要素が含まれているので、デフォルトの高さです通常の（アニメーションではない）状態では、高さがゼロであるため背景が見えません。アニメーション状態では、jQueryは要素の明示的な高さを設定するので、背景が表示されます。目に見える背景を取得するには、overflow: hidden〜.primary-navigationクラスをCSSに追加する必要があります。