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

트렌드

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

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

더보기 버튼

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 1 / 2 pages

	제목	날짜
25	설치경로	2025/02/02	3
	더보기 버튼	2025/02/01	3
23	마이로그	2025/02/01	2
22	파이어베이스 [1]	2025/02/01	4
21	해시태그 자바스크립트	2025/02/01	2
20	스크랩 ec_imin	2025/01/31	3
19	스크랩(threads) v1 [1]	2025/01/31	2
18	새로고침 없는 좋아요 버튼 [3]	2025/01/31	12
17	더보기 php 코드	2025/01/31	3
16	글추천 버튼	2025/01/31	10
15	글보기에서 바로 비밀글 변경하는 방법 [4]	2025/01/30	12
14	글보기에서 바로 비밀글 설정하는 방법 [1]	2025/01/30	3
13	[Tips] 라이믹스 모든 글 최신글 가져오기 코드	2025/01/29	6
12	[Tips] 라이믹스 특정 게시판 글 가져오기	2025/01/29	9
11	[구인] [모집] 💻 다국어지식나눔 조인어스월드 웹 IT 봉사단 동아리 6기를 모집합니다! (~ 2025.02.14)	2025/01/28	47
10	밍구님의 따뜻한 한마디	2025/01/27	11
9	라이믹스 debugPrint	2025/01/24	8
8	라이믹스 게시판 스크랩 기능	2025/01/21	9
7	라이믹스 후하니 스티커 모듈	2025/01/21	1
6	[미입금] 새로운 사이트에 후하니님의 스티커 모듈 설치 의뢰 [1]	2025/01/21	2