iPhone上的jQuery slideToggle留下了线条文物

Question

iPhone上的slideToggle有点问题。

扩展ul后，屏幕上会留下一些线条瑕疵。 （右键单击图像＆gt;查看图像以全尺寸查看）

这里奇怪的部分是，当我稍微放大时，线条会消失。当我再次缩小时，线条仍然消失。

代码：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
  jQuery.noConflict();
  jQuery(function () {
    jQuery("a").click(function () {
      var a = jQuery(this);          
      a.siblings("ul").slideToggle("slow");
      var url = jQuery.trim(jQuery(this).attr("href"));
      if (url != undefined && url.length > 0) return true;
      return false;
    });
  }); 
</script>

<style type="text/css">
  li
  {
    list-style: none;
    border: none;
  }

  ul
  {
    margin: 0;
    padding: 0;
    border: none;

    background-color: #fff;
  }

  #nav
  {
    padding-top: 7px;
    padding-bottom: 7px;
    border: none;  
    background-color: #fff;  
  }

  #nav ul
  {
    margin: 0;
    padding: 0;
    margin: 10px;
    background-color: #fff;
  }

  #nav ul ul
  {
    margin: 0;
    padding: 0;
    margin-top: 7px;
    margin-left: 15px;
    display: none;
    background-color: #fff;
  }

  #nav ul li
  {
    padding-bottom: 7px;  
    background-color: #fff;
  }

  #nav ul li.last
  {
    padding-bottom: 0px;
  }

  #nav ul li > a
  {
    display: block;
    padding: 15px;
    background: #05548D;
    color: White;
    text-decoration: none;
    border-radius: 5px;
  }

  #nav ul ul li > a
  {
    background: #1872BE;      
  }
</style>

<div id="nav">
  <ul>    
    <li><a href="">News &gt;</a>
      <ul>
        <li>
          <a href="Mobile-Home/News/Latest-News.aspx">Latest News</a>
        </li>
        <li>
          <a href="Mobile-Home/News/Upcoming-events.aspx">Upcoming events</a>
        </li>
        <li>
          <a href="Mobile-Home/News/Media-releases.aspx">Media releases</a>
        </li>
        <li>
          <a href="Mobile-Home/News/International-updates.aspx">International updates</a>
        </li>
        <li>
          <a href="Mobile-Home/News/eNewsletter.aspx">eNewsletter</a>
        </li>
        <li>
          <a href="Mobile-Home/News/Register-for-updates.aspx">Register for updates</a>
        </li>
      </ul>
    </li>   
  </ul>
</div>

Answer 1

我知道你刚才问过这个问题，所以我猜你可能已经解决了这个问题，但是我遇到了同样的问题并且寻求解决方案，最终想出了这个，所以我想我如果你还在寻找，我会分享解决方案。

通过在动画结束时重置背景颜色，可以防止这些工件累积。

var a = jQuery(this); var callback = function(){ $('#ul').css({'background':'#FFF'}); } a.siblings("ul").slideToggle("slow",callback);

希望有所帮助

修补程序