jQuery Mobile 중첩 접이식 패널 — nested collapsible 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 중첩 접이식 패널 —
nested collapsible 완전 정리

패널 안에 패널 — 트리/메뉴 구조 만들기

시작 오늘 분석할 코드

data-role="collapsible"을 중첩으로 사용해서 트리 구조를 만든다. 상위 패널을 열면 하위 패널 제목이 보이고, 그것을 또 열면 그 아래가 보이는 식이다.

<div data-role="collapsible"> <h3>상위 접이식 패널제목</h3> <p>패널 내용</p> <div data-role="collapsible"> <h3>하위 접이식 패널제목1</h3> <p>패널 내용</p> <div data-role="collapsible"> <h3>하위 접이식 패널제목2</h3> <p>패널 내용</p> </div> </div> </div>

실제 출력 미리보기 (모두 펼친 상태)

header 영역

▼ 상위 접이식 패널제목

패널 내용

▼ 하위 접이식 패널제목1

패널 내용

▼ 하위 접이식 패널제목2

패널 내용

footer 영역

---

용어 핵심 키워드

중첩(nested)collapsible 안에 또 collapsible — 트리 구조

레벨별 들여쓰기jQM이 깊이마다 자동으로 들여쓴다

독립 토글각 패널의 펼침/접힘은 서로 영향 없음

제한 없는 깊이3, 4, 5단계도 같은 패턴 반복

---

1 펼침 순서

처음에는 모두 접힘이다. 다음과 같이 펼쳐 나간다.

1 상위 패널만 보임 → 클릭

2 본문 + 하위1 제목이 보임 → 하위1 클릭

3 하위1 본문 + 하위2 제목이 보임 → 하위2 클릭

4 하위2 본문까지 모두 보임

---

2 자동 들여쓰기

jQM은 중첩된 collapsible을 보면 레벨이 깊어질수록 좌측 패딩을 더 준다. 별도로 CSS를 작성할 필요 없이 시각적 계층이 분명해진다.

또한 레벨마다 약간 다른 배경색을 줘서 깊이가 한눈에 구분된다. (위 데모에서 진한 초록 → 옅은 초록 → 회색 순)

---

3 어디에 쓰는가

• FAQ 메뉴 — 카테고리 → 질문 → 답변
• 설정 화면 — 분류 → 세부 옵션 → 옵션값
• 제품 카탈로그 — 대분류 → 중분류 → 소분류
• 도움말 페이지 — 챕터 → 섹션 → 내용

⚙ 모바일 친화적 — 작은 화면에서 한 번에 다 보여주기 어려운 정보를 단계적으로 펼쳐 보일 수 있다.

---

 

반응형

 

4 자주 하는 실수

실수	증상	해결
중첩 div를 열린 상태로 두기	코드 가독성 떨어짐	들여쓰기 4칸으로 정리
너무 깊은 중첩 (5단 이상)	사용자가 길을 잃음	3단 이내 권장
레벨 첫 자식이 h*가 아님	제목 띠가 안 만들어짐	각 패널마다 첫 자식으로 h*
collapsible-set으로 묶음 (단일 펼침 기대)	아무 것도 펼쳐지지 않음	set은 같은 깊이의 형제용 — 중첩과 다름

---

5 collapsible-set과의 차이

data-role="collapsible-set"은 같은 깊이의 형제 패널들을 묶는 그룹이다. 한 번에 하나만 펼치는 "아코디언" 동작을 만든다.

지금 본 코드는 set이 아니다 — 패널 안에 패널을 직접 넣은 중첩 구조다. 둘은 목적이 다르다.

---

6 현대식 대안

HTML5 <details>·<summary>도 중첩이 가능하다. 별도 라이브러리 없이 같은 트리 구조를 만들 수 있다.

<details> <summary>상위</summary> <p>내용</p> <details> <summary>하위1</summary> <details> <summary>하위2</summary> <p>내용</p> </details> </details> </details>

---

핵심 한 줄 요약

중첩 collapsible패널 안에 패널 — 트리 구조

자동 들여쓰기레벨마다 padding/색 차등

독립 토글상위 펼쳐도 하위는 그대로

권장 깊이3단 이내 — 그 이상은 길 잃음

현대식 대안<details> 태그도 중첩 가능

Tags

#jQuery-Mobile #collapsible #nested #중첩접이식 #트리구조 #들여쓰기 #다중레벨 #details #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery-Mobile, collapsible, nested, 중첩접이식, 트리구조, 들여쓰기, 다중레벨, details, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리