jQuery slideToggle在iPhone上留下线条痕迹

我在iPhone上滑动滑块时遇到了一点问题。jQuery slideToggle在iPhone上留下线条痕迹

展开ul后，屏幕上会留下一些线条痕迹。（右键单击图像>查看图片上的全尺寸观看）

enter image description here

这里的怪异的一部分是，当我在略微放大的线消失。当我再次缩小时，线条仍然消失。

代码：

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

来源

2012-08-01 Rollcredit

男孩，这是微妙的。这对于最终用户的移动Safari会有什么影响吗？似乎对于那些确实不是问题的事情可能会有很多麻烦。 – 2012-08-01 01:19:26

问题是客户抱怨它。 – Rollcredit 2012-08-01 02:25:18

我知道你问这是前一阵子，所以我想你可能已经解决了这个，但我有同样的问题，并猎杀aroudn的解决方案，并在最后提出了这个，所以我想我会分享的解决方案，以防万一你还在寻找。

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

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

希望帮助

补丁

来源

2012-12-14 13:21:20 Patch

jQuery slideToggle在iPhone上留下线条痕迹

回答

相关问题