편집 요약 없음 |
편집 요약 없음 |
||
| 24번째 줄: | 24번째 줄: | ||
$currentRow.stop(true, true).css({ | $currentRow.stop(true, true).css({ | ||
overflow: 'hidden', | overflow: 'hidden', | ||
display: 'table-row' | display: 'table-row' | ||
}).animate({ | }).animate({ | ||
height: 0, | height: 0, | ||
| 34번째 줄: | 32번째 줄: | ||
step: function(now, fx) { | step: function(now, fx) { | ||
if (fx.prop === "height") { | if (fx.prop === "height") { | ||
$currentRow.css(" | $currentRow.css("height", now); | ||
} | } | ||
}, | }, | ||
| 41번째 줄: | 39번째 줄: | ||
display: 'none', | display: 'none', | ||
height: '', | height: '', | ||
opacity: 1 | opacity: 1 | ||
}); | }); | ||
| 50번째 줄: | 47번째 줄: | ||
display: 'table-row', | display: 'table-row', | ||
height: 0, | height: 0, | ||
opacity: 0 | opacity: 0, | ||
overflow: 'hidden' | |||
}).animate({ | }).animate({ | ||
height: $currentRow.prop('scrollHeight'), | height: $currentRow.prop('scrollHeight'), | ||
| 58번째 줄: | 56번째 줄: | ||
step: function(now, fx) { | step: function(now, fx) { | ||
if (fx.prop === "height") { | if (fx.prop === "height") { | ||
$currentRow.css(" | $currentRow.css("height", now); | ||
} | } | ||
}, | |||
complete: function() { | |||
$currentRow.css({ | |||
height: '', | |||
overflow: '' | |||
}); | |||
} | } | ||
}); // 펼치기 애니메이션 - 표의 크기 부드럽게 증가 | }); // 펼치기 애니메이션 - 표의 크기 부드럽게 증가 | ||
2024년 11월 29일 (금) 11:45 판
$(document).ready(function() {
// 기존의 .custom-toggle 클릭 이벤트 핸들러
$('.custom-toggle').click(function() {
$(this).next('.custom-content').stop(true, true).slideToggle(300); // 300ms 애니메이션 추가
});
// .toggle-collapse 클릭 이벤트 핸들러 수정
$('.toggle-collapse').click(function() {
var $this = $(this);
var rowsToToggle = parseInt($this.data('rows')) || 1;
var isCollapsed = $this.data('collapsed') === true;
var $row = $this.closest('tr');
// 사용자 정의 텍스트 확인
var expandText = $this.data('expand-text') || '펼치기';
var collapseText = $this.data('collapse-text') || expandText; // 접기 텍스트가 없을 경우 펼치기 텍스트와 동일하게
// 지정된 행 수만큼 다음 행을 슬라이드 애니메이션으로 표시/숨김
$row.nextAll().each(function(index) {
if (index < rowsToToggle) {
var $currentRow = $(this);
if (isCollapsed) {
$currentRow.stop(true, true).css({
overflow: 'hidden',
display: 'table-row'
}).animate({
height: 0,
opacity: 0
}, {
duration: 600,
step: function(now, fx) {
if (fx.prop === "height") {
$currentRow.css("height", now);
}
},
complete: function() {
$currentRow.css({
display: 'none',
height: '',
opacity: 1
});
}
}); // 접기 애니메이션 - 표의 크기 부드럽게 감소
} else {
$currentRow.stop(true, true).css({
display: 'table-row',
height: 0,
opacity: 0,
overflow: 'hidden'
}).animate({
height: $currentRow.prop('scrollHeight'),
opacity: 1
}, {
duration: 600,
step: function(now, fx) {
if (fx.prop === "height") {
$currentRow.css("height", now);
}
},
complete: function() {
$currentRow.css({
height: '',
overflow: ''
});
}
}); // 펼치기 애니메이션 - 표의 크기 부드럽게 증가
}
}
});
// 상태 토글
$this.data('collapsed', !isCollapsed);
$this.text($this.data('collapsed') ? expandText : collapseText);
});
// 페이지 로드 시 기본 상태 설정
$('.toggle-collapse').each(function() {
var $this = $(this);
var rowsToToggle = parseInt($this.data('rows')) || 1;
var isCollapsed = $this.data('collapsed') === true;
// 사용자 정의 텍스트 확인
var expandText = $this.data('expand-text') || '펼치기';
var collapseText = $this.data('collapse-text') || expandText; // 접기 텍스트가 없을 경우 펼치기 텍스트와 동일하게
if (isCollapsed) {
var $row = $this.closest('tr');
$row.nextAll().each(function(index) {
if (index < rowsToToggle) {
$(this).hide(); // 페이지 로드 시 슬라이드 애니메이션 없이 즉시 숨김
}
});
$this.text(expandText);
} else {
$this.text(collapseText);
}
});
// <nolinkstyle> 태그를 .nolinkstyle 클래스로 변환
$('nolinkstyle').each(function() {
var $this = $(this);
var content = $this.html();
$this.replaceWith('<span class="nolinkstyle">' + content + '</span>');
});
});