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

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

.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 回答