javascript 구현 table 셀 클릭 숨 김 효과(인 스 턴 스 코드)

table 요소 의 높이 가 설정 되 지 않 으 면 내용 에 따라 벌 어 집 니 다.이 규칙 에 따라 기본 상태 에서 table-cell 의 폭 을 js 로 제어 하고 이 열의 table-cell 을 dispaly:block 으로 설정 하면 더 많은 내용 이 숨겨 집 니 다.클릭 이 벤트 를 추가 하여 table-cell 의 display 를 block 과 table-cell 사이 로 전환 합 니 다.클릭 하여 숨 김 효 과 를 낼 수 있 습 니 다!
js 코드 는 다음 과 같 습 니 다:

$('.cell').click(function(){
  if($(this).css('display')=='block'){
    console.log('ok');
    $(this).css('display'，'table-cell');
  }else{
    $(this).css('display'，'block');
  }
});

완전 쉬 워!단,block 으로 설정 하면 표 의 border 중첩 이 실 효 됩 니 다.이 동적 열 에 대해 서 는 스타일 을 따로 설정 하고 테 두 리 를 제거 해 야 합 니 다~