15

jQueryslideToggle()関数を使用してテーブルの新しい行のデータを表示/非表示にすると、スタッターが発生します。それでも、slideToggle()表示/非表示に使用すると、<div>非常にスムーズに機能します。

なぜこれが起こるのか誰か教えてもらえますか？

フィドルの例: http://jsfiddle.net/gLGUG/

jQuery コード:

$("tr").click(function () {
    $(".slideMe").slideToggle();
});

$(".slideMeDiv, button").click(function () {
    $(".slideMeDiv").slideToggle();
});

HTML マークアップ:

<table>
    <tr>
        <td>One Row</td>
    </tr>
    <tr>
        <td>Click me</td>
    </tr>
    <tr class="slideMe">
        <td>SlideDOWN</td>
    </tr>
</table>
<br />
<button>Slide Div</button>

<div class="slideMeDiv">
    Slide me as well
</div>
4

4 に答える 4

1

私はちょうど私のjsでこれを行います

$(document).ready(function(){
    $('tr').click(function(){
        $('.slideMe').slideToggle();
        $('.slideMe').css("display", "block")
    });
});

これにより、スライド トグルでは機能しない table-row として表示される tr タグが停止します。

于 2016-06-09T10:48:14.553 に答える
0

再構築されたテーブルの場合:

   <table>
     <tr>
         <td>One Row</td>
     </tr>
     <tr>
         <td>Click me</td>
     </tr>
     <tr class="slideMe">
         <td>
             <div class="tdDiv">SlideDOWN</div>
         </td>
     </tr>
   </table>

(1) 次のように、「slideMe」tr の td 内に「slideMe」tr と「div」の両方を表示するようにしてください。

$('.slideMe').show();
$('.slideMe').find('.tdDiv').show();

(2) このコードを使用して、slideMe の行を切り替えます

 function toggleRow(selector){
   if($(selector).css('display') == "none"){
      $(selector).find('.tdDiv').slideDown(200);
      $(selector).slideDown(200);
   }
   else{
      $(selector).slideUp(200);
      $(selector).find('.tdDiv').slideUp(200);
   }
}

*** tr が下にスライドする前に、tr の td 内の div が下にスライドすることを確認してください。

*** また、tr の td 内の div が上にスライドする前に、tr が上にスライドすることを確認してください。

(3) 最後に、toggleRow 関数を呼び出すことができます。

 toggleRow($('.slideMe'));
于 2015-02-27T22:34:41.653 に答える
0

スライド トグルは、td 内にデータがないテーブル行で正常に動作するように見えるため、td 内のコンテンツを slideToggle すると動作するはずです。

これを試して：

function slideToggleRow(selector){
    $(selector).find("td").contents().slideToggle();
    $(selector).slideToggle();
}

次のように使用します。

$("tr").click(function () {
    slideToggleRow(".slideMe");
});

これはうまくいくはずですが、完全ではないかもしれませんが、これまでのところ最善の解決策です。誰かがより良い解決策を見つけたら、私に知らせてください。

于 2013-09-27T18:13:21.033 に答える