더보기 버튼 - 아임웹 전문가찾기

트렌드

지금 이온디에서 어떤 주제의 글이 새로 올라왔는지 확인해보세요.

글 등록하기 | 내글 관리하기 | 연재글 | 보관함

더보기 버튼

2025.02.01 23:58 조회 수

이온디

첨부파일 https://imweb.eond.com/xe/471763

더보기 버튼

v.1

const btnMores = document.querySelectorAll('.btn-more');

btnMores.forEach(function (btnMore) {
    const toggleBox = btnMore.nextElementSibling; // btn-more의 바로 옆에 있는 toggle-wrap

    btnMore.addEventListener('click', function (event) {
       event.stopPropagation();

       // 다른 활성화된 toggle-wrap 비활성화
       document.querySelectorAll('.toggle-wrap.active').forEach(function (box) {
          if (box !== toggleBox) {
             box.classList.remove('active');
          }
       });

       // 현재 toggle-wrap의 활성화 상태를 토글
       toggleBox.classList.toggle('active');
    });
});

기존 코드는 화면이 변경되면 동작을 하지 않아서 아래 MutationObserver 적용함

v.2

// btn-more와 toggle-box 처리 함수

function setupToggleButtons() {

document.querySelectorAll('.btn-more').forEach(function (btnMore) {

if (btnMore.dataset.eventAdded) return; // 이미 이벤트가 추가된 요소는 제외

btnMore.dataset.eventAdded = true; // 중복 방지 플래그 설정

const toggleBox = btnMore.nextElementSibling; // btn-more의 바로 옆에 있는 toggle-wrap

btnMore.addEventListener('click', function (event) {

event.stopPropagation();

// 다른 활성화된 toggle-wrap 비활성화

document.querySelectorAll('.toggle-wrap.active').forEach(function (box) {

if (box !== toggleBox) {

box.classList.remove('active');

}

});

// 현재 toggle-wrap의 활성화 상태를 토글

toggleBox.classList.toggle('active');

});

}

// 최초 실행

setupToggleButtons();

// MutationObserver를 이용하여 DOM 변경 감지

const observer = new MutationObserver(function (mutations) {

mutations.forEach(function (mutation) {

if (mutation.type === 'childList') {

setupToggleButtons(); // 새로운 요소가 추가될 때 다시 실행

}

});

// body의 변화 감지 (자식 요소 추가/삭제 감지)

observer.observe(document.body, { childList: true, subtree: true });

Total 25 articles in 2 / 2 pages

	제목	날짜
5	[레거시코드] pointhistory 모듈 유지보수 방법	2025/01/16	9
4	[구인] <초기 창업팀 팀원모집(항공/기상 분야)> : Data Scientist (Part-Time)	2025/01/08	27
3	[대기] 모듈 개발 추가 요청	2025/01/06	17
2	[XE] 인기검색어 모듈+애드온+위젯 패키지 (PHP8수정버전) 문의 드립니다 [1]	2025/01/06	5
1	[대기] 포인트히스토리 스킨 수정 의뢰 [4]	2025/01/04	12