行がクリックされたときのテーブルの高さ

Question

私は行をクリックしたい行の数を持つテーブルを持っていて、次に隠れた行を滑らせます。問題は、私は各行の下にいくつかの空のスペースがあることです。この空のスペースを削除し、各行がクリックされたときにこれを追加する方法はありますか？

var clicked=true; 
 
$(".one").on('click', function(){ 
 
    if(clicked) 
 
    { 
 
     clicked=false; 
 
     $(".two").css({"top": 0}); 
 
    } 
 
    else 
 
    { 
 
     clicked=true; 
 
     $(".two").css({"top": "-25px"}); 
 
    } 
 
});

.one { 
 
    position: relative; 
 
    top: 0; 
 
    background-color: lightblue; 
 
    z-index: 1; 
 
    cursor:pointer; 
 
} 
 
.two { 
 
    position: relative; 
 
    top: -25px; 
 
    background-color: yellow; 
 
    z-index: -1; 
 
    -webkit-transition: top 1s; 
 
    -moz-transition: top 1s; 
 
    -o-transition: top 1s; 
 
    transition: top 1s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table border="0" style="border:1px solid #000;"> 
 
<tr class="one"> <td>HELLO WORLD</td></tr> 
 
<tr class="two"><td>THIS IS HIDE TEXT</td></tr> 
 
<tr class="one"> <td>HELLO WORLD</td></tr> 
 
<tr class="two"><td>THIS IS HIDE TEXT</td></tr> 
 
</table>

Answer 1

あなたはいつでもフレックスボックスレイアウトに頼ることができます。 ここでは、あなたの問題設定dispalyにhackish解決策の一種です：テーブル上のフレックスとディスプレイ：tr上のブロック。今の高さを移行することはNPである...

EDIT：個別行ごとに動作するように更新コード

$(".one").on('click', function() { 
 
    if ($(this).next().height()==0) { 
 
    clicked = false; 
 
    $(this).next().css({ 
 
     "top": 0, 
 
     "height": "25px" 
 
    }); 
 
    } else { 
 
    clicked = true; 
 
    $(this).next().css({ 
 
     "top": "-25px", 
 
     "height": "0" 
 
    }); 
 
    } 
 
});

table { 
 
    display: flex; 
 
} 
 
tr { 
 
    display: block 
 
} 
 
.one { 
 
    position: relative; 
 
    top: 0; 
 
    background-color: lightblue; 
 
} 
 
.two { 
 
    height:0; 
 
    overflow: hidden; 
 
    position: relative; 
 
    top: -25px; 
 
    background-color: yellow; 
 
    z-index: -1; 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    -o-transition: allt 1s; 
 
    transition: all 1s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table border="0" style="border:1px solid #000;"> 
 
    <tr class="one"> 
 
    <td>HELLO WORLD</td> 
 
    </tr> 
 
    <tr class="two"> 
 
    <td>THIS IS HIDE TEXT</td> 
 
    </tr> 
 
    <tr class="one"> 
 
    <td>HELLO WORLD</td> 
 
    </tr> 
 
    <tr class="two"> 
 
    <td>THIS IS HIDE TEXT</td> 
 
    </tr> 
 
</table>

Answer 2

は単純にこれですべてのjavascriptを代用：

$(".one").on('click', function(){ 
    $(this).next().toggle(); 
}); 

をあなたのjavascriptの部分のために： はここに私のスニペットですhttps://jsfiddle.net/1p8wut0k/1/

.next()はすぐに兄弟を見つけ

.toggle() hide/show（innately know）から変更します。また、数値を入力することでわずかなフェード効果を追加することもできます。