행을 클릭하면 테이블의 높이가 변경됩니다.

Question

행을 클릭 한 행 수가 숨겨진 행을 아래로 슬라이드하는 표가 있습니다. 문제는 내가 각 rows.is 거기에 빈 공간을 삭제하고 각 행을 클릭 할 때만이 방법을 추가 할 수있는 몇 가지 빈 공간이 있습니다.

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에 대한 일종의 해킹 해결책입니다 : 테이블에서 플렉스하고 디스플레이 : tr에서 차단하십시오. 업데이트 된 코드

$(".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

간단히이 모든 자바 스크립트를 대체 :

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

당신의 자바 스크립트 부분 : 여기 내 코드 조각입니다 https://jsfiddle.net/1p8wut0k/1/

.next()이 바로 형제를 발견

.toggle() hide/show (본질적으로 알고있는 것)에서 변경합니다. 숫자를 입력하여 약간의 페이드 효과를 추가 할 수도 있습니다.