참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* 이 자바스크립트 설정은 리버티 스킨을 사용하는 사용자에게 적용됩니다 */
$(document).ready(function() {
$('.mw-collapsible').click(function() {
var content = $(this).find('.mw-collapsible-content');
var currentHeight = content.height(); // 현재 높이
var targetHeight = content[0].scrollHeight; // 실제 내용의 높이
if (currentHeight === 0) {
// 펼칠 때: 콘텐츠 높이를 0에서 실제 높이로 애니메이션
animateHeight(content, 0, targetHeight);
} else {
// 접을 때: 콘텐츠 높이를 실제 높이에서 0으로 애니메이션
animateHeight(content, currentHeight, 0);
}
});
// 애니메이션 함수
function animateHeight(element, startHeight, endHeight) {
var startTime = null;
var duration = 500; // 애니메이션 지속 시간 (밀리초)
function step(timestamp) {
if (!startTime) startTime = timestamp;
var progress = (timestamp - startTime) / duration;
if (progress < 1) {
var newHeight = startHeight + (endHeight - startHeight) * progress;
element.height(newHeight); // 새로운 높이 설정
requestAnimationFrame(step); // 계속 애니메이션
} else {
element.height(endHeight); // 마지막에 정확한 높이 설정
}
}
requestAnimationFrame(step); // 애니메이션 시작
}
});