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 に答える