使用 jQuery .slideToggle 时背景颜色的闪烁答案

【问题标题】：Flash of background-color when using jQuery .slideToggle使用 jQuery .slideToggle 时背景颜色的闪烁
【发布时间】：2012-04-22 19:20:23
【问题描述】：

当我使用 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>

【问题讨论】：

标签： jquery slidetoggle

【解决方案1】：

你必须结束lis 的浮动。例如。使用类 primary-navigation 将 css overflow: hidden; 添加到 ul：

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

另见my example。（仅示例我还添加了上边距，没有 Menu 按钮在结果标签导致的jsfiddle中无法点击。）

【讨论】：

我只是在制作一个 jsFiddle。我正在考虑溢出以停止浮动。显然 clearfix 不起作用，但 overflow: hidden 是。我试过溢出：自动，不要问我为什么，但它是溢出：隐藏。非常感谢您！

【解决方案2】：

您的ul 仅包含浮动元素，因此其默认高度为 0。在正常（非动画）状态下，由于高度为零，背景不可见。在动画状态下，jQuery 为元素设置了显式高度，因此背景会显示出来。你应该在你的 CSS 中添加 overflow: hidden 到 .primary-navigation 类以获得可见的背景。

【讨论】：