편집 요약 없음 |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
$(document).ready(function() { | $(document).ready(function() { | ||
// .toggle-collapse 클릭 이벤트 핸들러 수정 | // .toggle-collapse 클릭 이벤트 핸들러 수정 | ||
$('.toggle-collapse').click(function() { | $('.toggle-collapse').click(function() { | ||
| 14번째 줄: | 9번째 줄: | ||
// 사용자 정의 텍스트 확인 | // 사용자 정의 텍스트 확인 | ||
var expandText = $this.data('expand-text') || '펼치기'; | var expandText = $this.data('expand-text') || '펼치기'; | ||
var collapseText = $this.data('collapse-text') || expandText; | var collapseText = $this.data('collapse-text') || expandText; | ||
// 지정된 행 수만큼 다음 행을 슬라이드 애니메이션으로 표시/숨김 | // 지정된 행 수만큼 다음 행을 슬라이드 애니메이션으로 표시/숨김 | ||
| 20번째 줄: | 15번째 줄: | ||
if (index < rowsToToggle) { | if (index < rowsToToggle) { | ||
var $currentRow = $(this); | var $currentRow = $(this); | ||
if (isCollapsed) { | if (isCollapsed) { | ||
$currentRow | // 펼침 애니메이션 | ||
$currentRow | |||
.css({ | |||
display: 'table-row', | |||
overflow: 'hidden', | |||
maxHeight: 0, | |||
maxWidth: 0 | |||
}) | |||
.animate({ | |||
maxHeight: $currentRow.prop('scrollHeight'), | |||
maxWidth: $currentRow.prop('scrollWidth'), | |||
opacity: 1 | opacity: 1 | ||
}, 600); | |||
} else { | |||
// 접기 애니메이션 | |||
$currentRow | |||
.animate({ | |||
maxHeight: 0, | |||
maxWidth: 0, | |||
opacity: 0 | |||
}, 600, function() { | |||
$currentRow.css('display', 'none'); | |||
}); | }); | ||
} | } | ||
} | } | ||
| 57번째 줄: | 56번째 줄: | ||
// 사용자 정의 텍스트 확인 | // 사용자 정의 텍스트 확인 | ||
var expandText = $this.data('expand-text') || '펼치기'; | var expandText = $this.data('expand-text') || '펼치기'; | ||
var collapseText = $this.data('collapse-text') || expandText; | var collapseText = $this.data('collapse-text') || expandText; | ||
if (isCollapsed) { | if (isCollapsed) { | ||
| 63번째 줄: | 62번째 줄: | ||
$row.nextAll().each(function(index) { | $row.nextAll().each(function(index) { | ||
if (index < rowsToToggle) { | if (index < rowsToToggle) { | ||
$(this). | $(this).css({ | ||
display: 'none', | |||
maxHeight: 0, | |||
maxWidth: 0 | |||
}); | |||
} | } | ||
}); | }); | ||
2024년 11월 29일 (금) 12:00 판
$(document).ready(function() {
// .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
.css({
display: 'table-row',
overflow: 'hidden',
maxHeight: 0,
maxWidth: 0
})
.animate({
maxHeight: $currentRow.prop('scrollHeight'),
maxWidth: $currentRow.prop('scrollWidth'),
opacity: 1
}, 600);
} else {
// 접기 애니메이션
$currentRow
.animate({
maxHeight: 0,
maxWidth: 0,
opacity: 0
}, 600, function() {
$currentRow.css('display', 'none');
});
}
}
});
// 상태 토글
$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).css({
display: 'none',
maxHeight: 0,
maxWidth: 0
});
}
});
$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>');
});
});