:: 게시판

:: 이전 게시판

- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다.
통합 규정을 준수해 주십시오. (2015.12.25.)

Date	2023/01/30 10:24:22
Name	Mindow
Subject	[질문] vue3 클릭이벤트를 통해 클래스 제어하여 아코디언 구현하기 스크립트 질문입니다
https://pgr21.com/qna/168708 삭게로! vue3 스크립트 질문입니다~ 원하는 기능은 로드할 땐 다 펼쳐져 있고 클릭하면 접히고 다시 클릭하면 열리는 구조입니다~ 하나를 열면 다른 건 접히지는 않는 기능으로 가려합니다 열고 접는 원리는 단순하게 클래스를 토글하는 방식으로 가려고 합니다 html 구조는 대충 이런 상태입니다 (피지알 에디터는 꺽쇠 작성이 안 먹혀서 대괄호로 대체하고 들여쓰기도 제대로 안 되니 양해 부탁드립니다~ ) //주석: 열렸을 땐 클래스 is-folded 제거 [div class="acco"] [button type="button" class="btn"]열기/닫기[/button] [div class="acco-content"] 아코디언 컨텐츠1 [/div] [/div] //주석: 접혔을 땐 클래스 is-folded 추가 [div class="acco is-folded"] [button type="button" class="btn"]열기/닫기[/button] [div class="acco-content"] 아코디언 컨텐츠2 [/div] [/div] ----------------------------------- 하려는 작업 방향은 하나를 열면 다른 건 그대로인 기능을 가려고 하는데 질문 하는 김에 추가 질문 드리면 하나 열면 다른 것들은 접히는 기능인 경우는 스크립트를 어떻게 짜야할지도 궁금합니다~!! :)

통합규정 1.3 이용안내 인용

"Pgr은 '명문화된 삭제규정'이 반드시 필요하지 않은 분을 환영합니다.
법 없이도 사는 사람, 남에게 상처를 주지 않으면서 같이 이야기 나눌 수 있는 분이면 좋겠습니다."

Theodore

해시 아이콘

23/01/30 10:30

하나 열면, 다른건 접히는 기능은 일단 전부 다 닫고, 열려야한 애를 여는 식으로 로직 구성하는 것으로 알고 있습니다.

Mindow

해시 아이콘

23/01/30 10:34

넵 일단 vue3 초보라서 질문 포인트는 클릭이벤트로 is-folded 클래스를 제어하는게 첫번째입니당...ㅠㅠ

MelOng

해시 아이콘

23/01/30 10:39

https://bootstrap-vue.org/docs/components/collapse
요런 component framework 적용하시는게 더 좋을 것 같네요~

Mindow

해시 아이콘

23/01/30 10:40

부트스트랩이나 뷰티파이 등 다른 ui 라이브러리 프레임워크는 안 쓰고 갈 계획이라서요...^^;;

눈물고기

해시 아이콘

23/01/30 10:41

아코디언의 현재 토글 상태값을 ref나 reactive로 관리하시고,
해당 변수를 클래스에 바인딩하시면 됩니다.

다중 토글이 안되는 아코디언의 경우,
모두 닫힌 상태를 기본으로 하되, 열려야 하는 특정 상태값에만 바인딩을 하시면 됩니다.

Mindow

해시 아이콘

23/02/02 14:09

답변 감사합니다~

초콜릿

해시 아이콘

23/01/31 00:07

:class="{'is-folded' : ref나 reactive로 만든 상태값("뭐"라고 이름을 붙이자면...)}"
그리고 버튼에다가는 @click="뭐=!뭐"

Mindow

해시 아이콘

23/02/02 14:09

답변 감사합니다~

목록 삭게로! 맨위로

번호	제목	이름	날짜	조회
168747	[질문] 논문읽기용 태블릿 (아이패드 vs 갤럭시탭) [19]	스토너17773	23/01/31	17773
168746	[질문] 원신 조합질문 [12]	카오루8257	23/01/31	8257
168745	[질문] 스벅 1+1 쿠폰 가져가실분있나요? [4]	핸드레이크8580	23/01/31	8580
168744	[질문] 인디게임이나 게임 추천좀 부탁드립니다. [20]	제드14016	23/01/31	14016
168743	[질문] 대변 색 때문에 급하게 질문드립니다 [7]	Dark12715	23/01/31	12715
168742	[질문] 이 경우 PC를 부품 교체 하는게 나을까요? 새로 사는게 나을까요? [8]	성야무인7014	23/01/31	7014
168741	[질문] 후쿠오카 시내 어르신 포함 7인 가족 갈만한 맛집 추천 부탁 드립니다. [7]	가라한10000	23/01/31	10000
168740	[질문] 레드와인 추천해주세요. [8]	쏘군7653	23/01/31	7653
168739	[질문] 아버지 차 추천 부탁드리겠습니다 [29]	CastorPollux7791	23/01/31	7791
168738	[질문] 거주 중인 전세집이 올 8월 만기인데 부동산 고수분들 조언부탁드립니다. [14]	목캔디10402	23/01/31	10402
168737	[질문] 페르소나 4골든 vs 5로얄 (스위치) [23]	바쿠8592	23/01/31	8592
168736	[질문] 직장인 환생물 웹소설?웹툰? 제목찾기 질문 드립니다. [6]	여자친구7396	23/01/31	7396
168735	[질문] TV셋탑박스 위치변경 질문있습니다. [3]	Mikopap7905	23/01/31	7905
168734	[질문] 부동산 임차인 변경에 따른 계약시 임대인의 중계료 지급여부 문의드립니다. [7]	백옥공자6368	23/01/31	6368
168733	[질문] 역곡역 LTE 잘 터지나요? [2]	탄야8665	23/01/31	8665
168732	[질문] 플스5 저스트 댄스 문의드립니다. [2]	허느8800	23/01/31	8800
168731	[질문] 와이프 친할머니 장례 질문입니다 [9]	무한도전의삶13096	23/01/31	13096
168730	[질문] 연말정산은 무조건 하나라도 빠짐없이 등록하는게 금전적으로 더 도움이 되나요? [15]	wersdfhr9163	23/01/30	9163
168729	[질문] 노트북 추천 부탁드립니다! [12]	Minneblom12007	23/01/30	12007
168728	[질문] 선물용 iMac 24인치 vs 맥북프로 13인치(M2) [8]	원7081	23/01/30	7081
168727	[질문] 포토샵 취미로 배울만한 오프라인 학원 있을까요?? [1]	아이폰128295	23/01/30	8295
168726	[질문] 슬램덩크 만화책 종류에 대해 질문입니다. [2]	Healing8042	23/01/30	8042
168725	[질문] 해외 달러통장에서 한국 달러 통장 송금 문의 [3]	Dončić7622	23/01/30	7622

목록 이전 다음

+ : 최근 1시간내에 달린 댓글
+ : 최근 2시간내에 달린 댓글

맨 위로

PGR21.com

통합규정 1.3 이용안내 인용