편집 요약 없음 태그: 수동 되돌리기 |
편집 요약 없음 태그: 되돌려진 기여 |
||
| 1번째 줄: | 1번째 줄: | ||
$(document).ready(function() { | $(document).ready(function () { | ||
// | // .custom-toggle 클릭 이벤트 핸들러 | ||
$('.custom-toggle').click(function() { | $('.custom-toggle').click(function () { | ||
$(this).next('.custom-content').slideToggle(); | $(this).next('.custom-content').stop().slideToggle(300); // 부드러운 전환 추가 | ||
}); | }); | ||
// .toggle-collapse 클릭 이벤트 핸들러 | // .toggle-collapse 클릭 이벤트 핸들러 (표 행 전환) | ||
$('.toggle-collapse').click(function() { | $('.toggle-collapse').click(function () { | ||
var $this = $(this); | var $this = $(this); | ||
var rowsToToggle = parseInt($this.data('rows')) || 1; | var rowsToToggle = parseInt($this.data('rows')) || 1; | ||
| 12번째 줄: | 12번째 줄: | ||
var $row = $this.closest('tr'); | var $row = $this.closest('tr'); | ||
// 사용자 정의 텍스트 | // 사용자 정의 텍스트 | ||
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. | $row.stop().slideToggle(300); // 부드러운 전환 추가 | ||
} | } | ||
} | } | ||
// 상태 | // 상태 변경 및 텍스트 업데이트 | ||
$this.data('collapsed', !isCollapsed); | $this.data('collapsed', !isCollapsed); | ||
$this.text( | $this.text(isCollapsed ? 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; | ||
var expandText = $this.data('expand-text') || '펼치기'; | var expandText = $this.data('expand-text') || '펼치기'; | ||
var collapseText = $this.data('collapse-text') || | var collapseText = $this.data('collapse-text') || '접기'; | ||
if (isCollapsed) { | if (isCollapsed) { | ||
| 43번째 줄: | 42번째 줄: | ||
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.hide(); // | $row.hide(); // 기본적으로 숨기기 | ||
} | } | ||
} | } | ||
2024년 11월 28일 (목) 20:37 판
$(document).ready(function () {
// .custom-toggle 클릭 이벤트 핸들러
$('.custom-toggle').click(function () {
$(this).next('.custom-content').stop().slideToggle(300); // 부드러운 전환 추가
});
// .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') || '접기';
// 애니메이션을 통해 지정된 행 수만큼 토글
for (var i = 0; i < rowsToToggle; i++) {
$row = $row.next();
if ($row.length) {
$row.stop().slideToggle(300); // 부드러운 전환 추가
}
}
// 상태 변경 및 텍스트 업데이트
$this.data('collapsed', !isCollapsed);
$this.text(isCollapsed ? 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') || '접기';
if (isCollapsed) {
var $row = $this.closest('tr');
for (var i = 0; i < rowsToToggle; i++) {
$row = $row.next();
if ($row.length) {
$row.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>');
});
});