4

jQueryを使用してテーブル内でslideToggleを実行しようとしていますが、FF、OP、CHromeで機能します。IE（6,7,8）だけが私に問題を与えています。完全に上下にスライドしますが、スライドアップアニメーションが終了した後です。非表示が完全な高さでポップアップしてから閉じます。

ですから、最小の高さから「display：none」に切り替わるときは、少しの間表示されるはずです。

コードは動的にビルドされますが、例を挙げてみましょう。

<table>
<tr>
    <td>
        <script type="text/javascript">
            function toggleTr_{$dynamicID}() {
                $('#content_{$dynamicID}').slideToggle('slow');
                /* DO SOME OTHER STOFF LIKE COLOR CHANGES CSS CLASS CHANGES */
            }
        </script>
    </td>
</tr>
<tr id="list_{$dynamicID}" onclick="toggleTr_{$dynamicID}();" style="cursor:pointer;">
    <td> <!-- INFO HEADER --> </td>
</tr>
<tr>
    <td>
        <div id="content_{$dynamicID}" style="display:none;">
         <!-- INFO BODY HIDDEN --> 
        </div
    </td>
</tr>

ここでのslideToggleに関するその他の問題は、パディング、マージン、またはアニメーションの問題のみを説明していますが、それはすべて機能します。

ヘルプをいただければ幸いです。

Thx、Spanky

4

2 に答える 2

2

私は解決策を見つけました。

高さを0pxに戻すと、jqueryの.slideUp（）関数だけが問題を引き起こしているようです。このバグは、ブラウザがQuirksMode（HTML Transitional 4.01 DocType）およびIEで動作している場合にのみ発生するようです。ここで見つけた解決策は、.slideUp（）の代わりです。だから代わりに

targetElement.slideUp(speed,callBack)

あなたが書く

var h = target.height();
var cssHeight=target.css('height');
target.animate({ 
    height: '1px' }, speed, function() { 
    target.hide();
    target.height(h);
    target.css('height',cssHeight);
    callBack(); 
});

Thx to Siderite Zackwehdex woもこのバグをjQuery（http://dev.jquery.com/ticket/5062）に報告しましたが、修正されません。彼らは言った：

ドキュメントがquirksmode（適切なDoctypeを提供する）になっていないことを確認できます。これは、この問題が発生したときに通常推奨される方法です。

また、HTMLを修正して「QuirksModeClean」にする時間や制御がないすべての人のために、.slideToggle（）の修正または置換を見つけました。

ここでは、チャームのように機能する説明と機能を見つけることができます。私がしなければならなかった唯一の変更は、高さを「1px」に設定して、要素が最初から非表示になっている場合に.slideToggle（）の最初の実行でジャンプして開かないようにすることでした。

したがって、私の作業ソリューションは最終的に次のようになります。

// this is a fix for the jQuery slide effects
  function slideToggle(el, bShow){
    var $el = $(el), height = $el.data("originalHeight"), visible = $el.is(":visible");

    // if the bShow isn't present, get the current visibility and reverse it
    if( arguments.length == 1 ) bShow = !visible;

    // if the current visiblilty is the same as the requested state, cancel
    if( bShow == visible ) return false;

    // get the original height
    if( !height ){
      // get original height
      height = $el.show().height();
      // update the height
      $el.data("originalHeight", height);
      // if the element was hidden, hide it again
      if( !visible ) $el.css({height: '1px'}).hide();
    }

    // expand the knowledge (instead of slideDown/Up, use custom animation which applies fix)
    if( bShow ){
      $el.show().animate({height: height}, {duration: 500});
    } else {
      $el.animate({height: '1px'}, {duration: 500, complete:function (){
          $el.hide();
        }
      });
    }
  }
于 2010-06-10T09:34:19.407 に答える
0

この質問/回答とこの回答（コールバック関数の使用方法について）を確認してください。

ズーム修正を使用して、IEの問題を解決することもできます。

于 2010-06-09T13:18:22.950 に答える