:: 게시판

:: 이전 게시판

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

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

답변 감사합니다~

목록 삭게로! 맨위로

번호	제목	이름	날짜	조회
168709	[질문] 원신 처음 시작했습니다. 초보자 가이드 질문있습니다 [11]	카오루9302	23/01/30	9302
168708	[질문] vue3 클릭이벤트를 통해 클래스 제어하여 아코디언 구현하기 스크립트 질문입니다 [8]	Mindow7417	23/01/30	7417
168707	[질문] 어제 아이폰으로 넘어갔는데 현장결제 수단 질문 입니다~! [13]	카즈하8032	23/01/30	8032
168706	[질문] 특수청소를 해보고 싶습니다. [7]	티타늄7231	23/01/30	7231
168705	[질문] 뱅드림 전곡을 들을 수 있는 스트리밍 서비스가 있을까요 [2]	EZrock8225	23/01/29	8225
168704	[질문] 책상 두 개 정도로 좁혀봤는데 어떤게 나아보이세요? [4]	About time9624	23/01/29	9624
168703	[질문] 지금 4K 모니터는 시기상조 일까요? [16]	Nothing Phone(1)9006	23/01/29	9006
168702	[질문] 2003년 와인 먹어도 되나요? [8]	VictoryFood10248	23/01/29	10248
168701	[질문] 영심이 만화를 보면서 궁금한 점이 몇 가지 있는데요 [10]	애플댄스7202	23/01/29	7202
168700	[질문] 스포츠구단 운영은 모기업에 비용만큼의 도움이 되나요? [13]	상록일기7514	23/01/29	7514
168699	[질문] 아이패드 에어 5세대에 이런현상 겪으신분있나요 [2]	날아라 코딱지8010	23/01/29	8010
168698	[질문] 집에서 요리하시는 분들 식단 어떻게 짜시나요? [6]	꿀깅이6836	23/01/29	6836
168697	[질문] 저도 컴퓨터 견적 한번 부탁드립니다. [2]	금빛구름6669	23/01/29	6669
168696	[질문] 책읽을 태블릿 추천 부탁드립니다. [5]	로스7837	23/01/29	7837
168695	[질문] 후쿠오카 텐진 쪽 호텔 및 주차 관련 질문입니다. [7]	가라한7740	23/01/29	7740
168694	[질문] 무에타이,킥복싱을 배워볼까 하는데요	핑크솔져8056	23/01/29	8056
168693	[질문] 내추럴 와인에 대해 잘 아시는 분 계신가요? [9]	휵스12498	23/01/29	12498
168692	[질문] 이런류 장르는 뭐라고 불리나요? [6]	연애잘합니다8943	23/01/29	8943
168691	[질문] 성심당 방문 질문입니다. [15]	MC SMJ10056	23/01/29	10056
168690	[질문] 슬램덩크 오락실 게임 슈퍼슬램 질문입니다. [8]	탈리스만11434	23/01/29	11434
168689	[질문] 컴퓨터 견적 문의드립니다 [10]	어지러운안개8259	23/01/29	8259
168688	[질문] 패드용 다이어리 어떻게 사용하시나요? [6]	Valorant6327	23/01/29	6327
168687	[질문] 간단한 클립아트를 그려주는 AI 서비스가 있으면 추천 바랍니다. [3]	엔딤7910	23/01/29	7910

목록 이전 다음

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

맨 위로

PGR21.com

통합규정 1.3 이용안내 인용