1

iPhone 上的 slideToggle 有点问题。

ul 展开后，屏幕上会留下一些线条伪影。（右键单击图像>查看图像以全尺寸查看）

在此处输入图像描述

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

编码：

<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>
4

1 回答 1

0

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

通过在动画结束时重置背景颜色，可以防止这些伪影堆积。

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

希望有帮助

修补

于 2012-12-14T13:21:20.487 回答