Question

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

Answer 1

你必须结束li的浮动。例如。使用主要导航类向overflow: hidden;添加css ul：

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

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

Answer 2

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

使用jQuery .slideToggle时背景色的Flash

2 个答案: