web-dev-qa-db-ja.com

テーブル行のslideToggle

slideToggleはテーブルで機能しますか？

テーブルの行をスライドして切り替えます。しかし、何の効果もなく表示されます。

jqueryslidetoggle
30
hd.

SlideToggleはテーブル行で動作しますが、ちょっとした問題です。

テーブルの行の高さが最小値よりも大きい場合-このように

<tr height="30%">

次に、slidetoggleは最小の高さに達するまでスムーズにスライドダウンします。その後、使用したようにすぐに消えます。

$("#tr").hide();

http://jsfiddle.net/BU28E/1/ でこれを実証するjsfiddleを作成しました

あなたのためのより良い解決策は、divで作られたテーブルを使用することです。 Divは非常にスムーズにスライドします。 http://jsfiddle.net/BU28E/2/ でこれを示す別のjsfiddleを作成しました

36
jwegner

私がすることは、行に単一のDIVを置き、TRとTDのパディングをゼロに設定します。その後、行の代わりにdivをスライド切り替えできます。

<table>
  <tr style="padding: 0">
    <td style="padding: 0">
      <div id="slideme" style="display: none">
    </td>
  </tr>
</table>

$("#slideme").slideToggle();

よく働く。必要に応じて、各列にDIVを配置し、それらを同時にスライド切り替えできると思います。

17
Jonatan

この回避策が考慮され効率的な方法であるかどうかはわかりませんが、私にとってはうまくいきました：

テーブルの最初の行をslideUpしたい（このコードはヘッダーをslideUpする）と言ってください：

$('table tr').first().children().slideUp();

したがって、基本的には、行自体ではなく、行の子を上にスライドさせたいと思います:)

5
Mawaheb

使用してみてください

$("#tr").fadeToggle(1000)

同様の効果のために

2
Robert Benyi

これを行うには、スライドするtrをdisplay:none;に設定してから、そのtr内にtdを追加し、その中にdisplay:noneとしても設定されるcolspanを持つテーブルの列数に等しいdivを追加しますtd。

スライドする行に必要なすべてのコンテンツは、前述のdivに移動し、アニメーションでスライドするtrになります。

以下のスニペットはこれを実際に示しています。

$(".accordion-row").on("click",
  function() {
    var accordionRow = $(this).next(".accordion");
    if (!accordionRow.is(":visible")) {
      accordionRow.show().find(".accordion-content").slideDown();
    } else {
      accordionRow.find(".accordion-content").slideUp(function() {
        if (!$(this).is(':visible')) {
          accordionRow.hide();
        }
      });
    }
  });
.accordion-row {
  cursor: pointer;
}

.accordion {
  display: none;
  width: 100%;
}

.accordion-content {
  display: none;
}


/* Only used to remove undeeded padding added by bootstrap */
table.table.table-hover>tbody>tr>td {
  padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>
        th1
      </th>
      <th>
        th2
      </th>
      <th>
        th3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="accordion-row">
      <td>
        tr1 td1
      </td>
      <td>
        tr1 td2
      </td>
      <td>
        tr1 td3
      </td>
    </tr>
    <tr class="accordion">
      <td colspan="3">
        <div class="accordion-content">
          tr1 accordion-content
        </div>
      </td>
    </tr>
    <tr class="accordion-row">
      <td>
        tr2 td1
      </td>
      <td>
        tr2 td2
      </td>
      <td>
        tr2 td3
      </td>
    </tr>
    <tr class=" accordion">
      <td colspan="3">
        <div class="accordion-content">
          tr2 accordion-content
        </div>
      </td>
    </tr>
  </tbody>
</table>
2
Callum

テーブルの行をスライドできないという問題に対する少しの回避策を思いつきました。このコードは、テーブルの内容が完全にテキストの場合にのみ機能します。これは、いくつかの作業で他のもの（画像など）をサポートするように調整できます。アイデアは、行がコンテンツのサイズに達するまでしか縮小しないということです。したがって、必要に応じてコンテンツを縮小できる場合、スライドは続行します。

http://jsfiddle.net/BU28E/622/

$("button").click(function(){
    $('#1').slideUp({
        duration: 1500,
        step: function(){
            var $this = $(this);
            var fontSize = parseInt($this.css("font-size"), 10);

            // if the real and css heights differ, decrease the font size until they match
            while(!sameHeight(this) && fontSize > 0){
                $this.css("font-size", --fontSize);
            }
        }
    });
});

function sameHeight(el){
    var cssHeight = el.style.height;
    cssHeight = parseFloat(cssHeight.substring(0,cssHeight.length-2));
    var realHeight = $(el).innerHeight();

    return isNaN(cssHeight) || realHeight - cssHeight < 2;
}

通常のスライド効果とは対照的に、コンテンツが縮小するという点で、効果はわずかに異なります。

< 2最後の行の境界線（およびその他の要因）に基づいて調整する必要がある場合があります。また、これはコンテンツの非表示のみを示しています。行が下に下がったときにフォントサイズを大きくするには、同様のアプローチが必要です。これは概念実証の詳細です。

2
James Montagne

編集：ジョナタンの答えを試した後、彼の方法はかなりきれいに見えます。

ここに、クラス_view-converters_を持つテーブル行があり、クリックすると、クラスTCConvertersを持つすべてのdivを表示/非表示します。

私の行は次のようになります。

_<tr><td><div class="TCConverters"><input type="button" value="b1"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b2"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b3"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b4"></div></td></tr>
_

_view-converters_をクリックすると実行されるコードを次に示します。

テーブルセルのパディングには特別なことはしませんでした。

スライドのアニメーション化が完了したら、テーブル行を非表示にすることに注意してください。

_$(".view-converters").click(function() {
    if(!$(".TCConverters:first").is(":visible")) {
        $(".TCConverters").parent().parent().show();
    }
    $(".TCConverters").slideToggle(200,function() { 
        if(!$(this).is(":visible")) {
            $(this).parent().parent().hide();
        }
    });
});
_

次のようになります。

Slide Table

オリジナル：

ここに、クラス_view-converters_のテーブル行があり、これをクリックすると、クラスTCConvertersのすべての行を表示/非表示します。

hackyの初期値と各_.each_の増分を変更することにより、速度を調整できます。

これはスライドのトグルほどうまく行を伸ばしませんが、効果は私の目的のために機能しました。

行の高さを本当に絞りたい場合は、param.hide()を0に達するまで高さを縮小するsetTimeoutに置き換えることにより、自分でアニメーション化することができます。

_$(".view-converters").click(function() {
    var hacky = 50;
    if($('.TCConverters:first').is(':visible')) {
        $('.TCConverters').each(function() {
            var param = $(this);
            setTimeout(function() { param.hide(); },hacky);
            hacky += 5;
        });
    }
    else {
        $($('.TCConverters').get().reverse()).each(function() {
            var param = $(this);
            setTimeout(function() { param.show(); },hacky);
            hacky += 5;
        });
    }
});
_

次のようになります。

TR Slide Toggle

0
user1274820