:: 게시판

:: 이전 게시판

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

Date	2023/01/30 10:24:22
Name	Mindow
Subject	[질문] vue3 클릭이벤트를 통해 클래스 제어하여 아코디언 구현하기 스크립트 질문입니다
https://cdn.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

답변 감사합니다~

목록 삭게로! 맨위로

번호	제목	이름	날짜	조회
168822	[질문] [원신] 행추3돌 향릉(명함) vs 행추2돌 향릉1돌 [6]	카오루8005	23/02/05	8005
168821	[질문] 맥북에 외장하드를 연결한뒤로 외장하드가 먹통입니다 ㅠㅠ [5]	흔솔략7985	23/02/05	7985
168820	[질문] 갤럭시 탭 or 펜 사용질문입니다. [6]	로스6984	23/02/05	6984
168819	[질문] 여동생이랑 수성의 마녀 보기 [12]	실제상황입니다7474	23/02/05	7474
168818	[질문] 스테이크 레스팅 질문입니다. [5]	코기토7670	23/02/05	7670
168817	[질문] 무선 헤드폰 추천해주세요 [8]	리얼월드10240	23/02/05	10240
168816	[질문] 10년 전 수능보다 지금 수능이 더 어려울까요? [16]	림림9357	23/02/05	9357
168815	[질문] TV살때 어떤것들을 확인하면 되는건가요? [13]	Restar10317	23/02/04	10317
168814	[질문] 게임할 때 편안한 의자 추천부탁드립니다. [2]	찬가(PGR21)9651	23/02/04	9651
168813	[질문] 헤드폰 어떤 거 사야할까요? [5]	그때가언제라도8204	23/02/04	8204
168812	[질문] AI가 소설을 정복하려면 얼마나 남았을까요? [24]	실제상황입니다10572	23/02/04	10572
168811	[질문] 구형 CPU(i7-3770k)을 이용한 ITX 서버조립 질문 [2]	예루리9040	23/02/04	9040
168810	[질문] 항공 마일리지 카드는 일반 할인카드에 비해 가성비 괜찮은지요? [9]	Ellun8248	23/02/04	8248
168809	[질문] 태블릿 (갤럭시탭 및 아이패드) 노트어플 추천 부탁드립니다 [1]	스토너10334	23/02/04	10334
168808	[질문] 에어컨 청소에 대한 질문입니다. [6]	커피소년8669	23/02/04	8669
168807	[질문] [맞춤법] ~~거 같다. 가 맞춤법이 맞나요?? [4]	아이폰127527	23/02/04	7527
168806	[질문] 조립PC 이륙준비 전 최종점검 부탁드립니다. [3]	Falling9576	23/02/04	9576
168805	[질문] 해외여행 듀얼심은 eSIM 이랑 USIM 중에 뭐가 나을까요? [4]	서울10761	23/02/04	10761
168804	[질문] 한성 노트북 어떤가요? [7]	리클라이너10028	23/02/04	10028
168803	[질문] 퀴즈 좀 풀어주세요... [6]	버벌진트8242	23/02/04	8242
168802	[질문] 띄어쓰기 질문있습니다. [12]	영혼의 귀천10176	23/02/04	10176
168801	[질문] 삼성에서는 이제 울트라북만 만드는건가요? [5]	wersdfhr11789	23/02/03	11789
168800	[질문] 알뜰폰 메이저 업체가 어떻게 되나요? [13]	별빛다넬9996	23/02/03	9996

목록 이전 다음

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

맨 위로

PGR21.com

통합규정 1.3 이용안내 인용