미디어위키:Common.js: 두 판 사이의 차이

편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
태그: 수동 되돌리기
5번째 줄: 5번째 줄:
     });
     });


     // .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;
         var isCollapsed = $this.data('collapsed') === true;
         var isCollapsed = $this.data('collapsed') === true;
        var $row = $this.closest('tr');
        // 사용자 정의 텍스트 확인
         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; // 접기 텍스트가 없을 경우 펼치기 텍스트와 동일하게


         // 현재 클릭한 버튼이 포함된 행의 다음 행들을 그룹화
         // 지정된 행 수만큼 다음 행을 슬라이드 토글 (애니메이션) 적용
         var $row = $this.closest('tr'); // 현재 클릭한 버튼이 포함된 행 선택
         for (var i = 0; i < rowsToToggle; i++) {
        var $rowsToToggle = $row.nextAll('.toggle-row').slice(0, rowsToToggle); // 다음 행들 그룹화
            $row = $row.next();
 
            if ($row.length) { // 다음 행이 존재하는지 확인
        // CSS 클래스로 전환 애니메이션 적용
                $row.stop(true, true).slideToggle(300); // 300ms 동안 슬라이딩
         $rowsToToggle.toggleClass('show'); // 'show' 클래스를 토글하여 전환 효과 적용
            }
         }


         // 상태 토글 및 텍스트 변경
         // 상태 토글
         $this.data('collapsed', !isCollapsed);
         $this.data('collapsed', !isCollapsed);
         $this.text($this.data('collapsed') ? expandText : collapseText);
         $this.text($this.data('collapsed') ? expandText : collapseText);
30번째 줄: 34번째 줄:
         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') || expandText; // 접기 텍스트가 없을 경우 펼치기 텍스트와 동일하게
         var collapseText = $this.data('collapse-text') || expandText; // 접기 텍스트가 없을 경우 펼치기 텍스트와 동일하게


        var $row = $this.closest('tr'); // 현재 클릭한 버튼이 포함된 행 선택
        var $rowsToToggle = $row.nextAll('.toggle-row').slice(0, rowsToToggle); // 다음 행들 그룹화
        // 기본 상태 설정: 숨겨야 하는 경우
         if (isCollapsed) {
         if (isCollapsed) {
             $rowsToToggle.removeClass('show'); // 페이지 로드 숨김
             var $row = $this.closest('tr');
            for (var i = 0; i < rowsToToggle; i++) {
                $row = $row.next();
                if ($row.length) { // 다음 행이 존재하는지 확인
                    $row.hide(); // 페이지 로드 시에는 슬라이딩 없이 숨김
                }
            }
             $this.text(expandText);
             $this.text(expandText);
         } else {
         } else {
            $rowsToToggle.addClass('show'); // 페이지 로드 시 표시
             $this.text(collapseText);
             $this.text(collapseText);
         }
         }

2024년 9월 27일 (금) 14:23 판

$(document).ready(function() {
    // 기존의 .custom-toggle 클릭 이벤트 핸들러
    $('.custom-toggle').click(function() {
        $(this).next('.custom-content').slideToggle(); 
    });

    // 새로 추가할 .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; // 접기 텍스트가 없을 경우 펼치기 텍스트와 동일하게

        // 지정된 행 수만큼 다음 행을 슬라이드 토글 (애니메이션) 적용
        for (var i = 0; i < rowsToToggle; i++) {
            $row = $row.next();
            if ($row.length) { // 다음 행이 존재하는지 확인
                $row.stop(true, true).slideToggle(300); // 300ms 동안 슬라이딩
            }
        }

        // 상태 토글
        $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');
            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>');
    });
});