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

트렌드

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

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

더보기 버튼

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) {