편집 요약 없음 태그: 되돌려진 기여 |
편집 요약 없음 태그: 되돌려진 기여 |
||
| 1번째 줄: | 1번째 줄: | ||
$(document).ready(function() { | $(document).ready(function() { | ||
$('.toggle-collapse').click(function () { | $('.toggle-collapse').click(function () { | ||
var $this = $(this); | var $this = $(this); | ||
| 15번째 줄: | 8번째 줄: | ||
// 사용자 정의 텍스트 확인 | // 사용자 정의 텍스트 확인 | ||
var expandText = $this.data('expand-text') || '펼치기'; | var expandText = $this.data('expand-text') || '펼치기'; | ||
var collapseText = $this.data('collapse-text') || | var collapseText = $this.data('collapse-text') || '접기'; | ||
// 접기/펼치기 애니메이션 처리 | |||
for (var i = 0; i < rowsToToggle; i++) { | for (var i = 0; i < rowsToToggle; i++) { | ||
$row = $row.next(); | $row = $row.next(); | ||
if ($row.length) { | if ($row.length) { | ||
$row. | var $content = $row.find('td'); // 행의 셀을 기준으로 높이 계산 | ||
if (!isCollapsed) { | |||
// 펼치기: 현재 높이를 계산 후 애니메이션 적용 | |||
$row.addClass('collapsible-row expanded'); | |||
var currentHeight = $content.outerHeight(); | |||
$row.css('max-height', currentHeight + 'px'); | |||
} else { | |||
// 접기: 애니메이션 후 높이를 0으로 설정 | |||
$row.removeClass('expanded'); | |||
setTimeout(function () { | |||
$row.css('max-height', '0'); | |||
}, 10); // 트랜지션이 시작되도록 약간의 딜레이 추가 | |||
} | |||
} | } | ||
} | } | ||
// 상태 토글 | // 상태 토글 및 버튼 텍스트 변경 | ||
$this.data('collapsed', !isCollapsed); | $this.data('collapsed', !isCollapsed); | ||
$this.text($this.data('collapsed') ? expandText : collapseText); | $this.text($this.data('collapsed') ? expandText : collapseText); | ||
}); | }); | ||
// | // 초기 상태 설정 | ||
$('.toggle-collapse').each(function () { | $('.toggle-collapse').each(function () { | ||
var $this = $(this); | var $this = $(this); | ||
var rowsToToggle = parseInt($this.data('rows')) || 1; | var rowsToToggle = parseInt($this.data('rows')) || 1; | ||
var isCollapsed = $this.data('collapsed') === true; | var isCollapsed = $this.data('collapsed') === true; | ||
if (isCollapsed) { | if (isCollapsed) { | ||
| 44번째 줄: | 46번째 줄: | ||
$row = $row.next(); | $row = $row.next(); | ||
if ($row.length) { | if ($row.length) { | ||
$row. | $row.addClass('collapsible-row').css('max-height', '0'); | ||
} | } | ||
} | } | ||
} | } | ||
}); | }); | ||
2024년 11월 29일 (금) 14:28 판
$(document).ready(function() {
$('.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') || '접기';
// 접기/펼치기 애니메이션 처리
for (var i = 0; i < rowsToToggle; i++) {
$row = $row.next();
if ($row.length) {
var $content = $row.find('td'); // 행의 셀을 기준으로 높이 계산
if (!isCollapsed) {
// 펼치기: 현재 높이를 계산 후 애니메이션 적용
$row.addClass('collapsible-row expanded');
var currentHeight = $content.outerHeight();
$row.css('max-height', currentHeight + 'px');
} else {
// 접기: 애니메이션 후 높이를 0으로 설정
$row.removeClass('expanded');
setTimeout(function () {
$row.css('max-height', '0');
}, 10); // 트랜지션이 시작되도록 약간의 딜레이 추가
}
}
}
// 상태 토글 및 버튼 텍스트 변경
$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;
if (isCollapsed) {
var $row = $this.closest('tr');
for (var i = 0; i < rowsToToggle; i++) {
$row = $row.next();
if ($row.length) {
$row.addClass('collapsible-row').css('max-height', '0');
}
}
}
});
// <nolinkstyle> 태그를 .nolinkstyle 클래스로 변환
$('nolinkstyle').each(function() {
var $this = $(this);
var content = $this.html();
$this.replaceWith('<span class="nolinkstyle">' + content + '</span>');
});
});