0

jQuery の .slideToggle を使用していると、.primary-navigation で優先背景色のフラッシュが表示されますが、永続的ではありません。アニメーション中は優先する背景色が表示されますが、アニメーションが完了するとそのままではありません。頭をかきむしり続けているのですが、よくわかりません。なぜこれが起こっているのか、それを解決する方法を知っている人はいますか? この問題は、最新の Chrome、FF、および iOS Safari で発生します。

編集:これは、問題を解決した 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>
4

2 に答える 2

1

s のフローティングを終了する必要がありliます。たとえば、クラスprimary-navigationでcssoverflow: hidden;を追加します。ul

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

私の例も参照してください。(結果ラベルが原因で jsfiddle でメニューボタンをクリックできなかった場合にのみ、上部マージンも追加しました。)

于 2012-04-22T10:51:10.497 に答える
0

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

于 2012-04-22T11:00:06.093 に答える