:: 게시판

:: 이전 게시판

- 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

답변 감사합니다~

목록 삭게로! 맨위로

번호	제목	이름	날짜	조회
168776	[질문] S23 울트라 구매 관련 [8]	Twiz9406	23/02/02	9406
168775	[질문] 자영업하시는분 정부 지원 바우처, 고용 환급 등에 대해 궁금합니다 [4]	훈남아닌흔남8805	23/02/02	8805
168774	[질문] 조건에 맞는 턴제 RPG 게임이 있을까요? [30]	grrrill12496	23/02/02	12496
168773	[질문] 예시 중 게임 추천 부탁 드립니다~(PSN 무료게임들) [27]	모나크모나크9352	23/02/02	9352
168772	[질문] 조던 관련 뻘질문 [10]	니체8438	23/02/02	8438
168771	[질문] 계단오르기 운동 질문입니다 [14]	수리검9301	23/02/02	9301
168770	[질문] TV 65인치, 75인치 고민이 되네요. [30]	그때가언제라도9364	23/02/02	9364
168769	[질문] 로지텍 기계식 키보드는 어떠한 편인가요? [9]	LG의심장박용택8340	23/02/02	8340
168768	[질문] PS+에 가입할까 하는데 어렵네요! [2]	눈팅만일년8691	23/02/02	8691
168767	[질문] 컴알못 컴퓨터 구매 질문 드립니다. [14]	먼산바라기9070	23/02/02	9070
168766	[질문] 진짜 얇은 스마트워치는 없겠죠?? [13]	커피소년9572	23/02/02	9572
168765	[질문] [원신]이나즈마를 못가는데..라이덴은요? [9]	카오루7607	23/02/02	7607
168764	[질문] 블루아카이브 초보 질문 입니다 [6]	플스59442	23/02/02	9442
168763	[질문] 네스프레소 -> 일리로 갈아탈만 할까요? [19]	Ahri9539	23/02/02	9539
168762	[질문] 실내에서 집을 방음/보온하는 방법이 있을지요...? [6]	nexon8604	23/02/01	8604
168761	[질문] 크롬캐스트 질문이요 [4]	메롱약오르징까꿍8000	23/02/01	8000
168760	[질문] 특정 사이트 느려짐 [2]	아린어린이7729	23/02/01	7729
168759	[질문] 차량 접촉 사고가 났습니다. 상대측이 조건부를 걸어왔는데 어떻게 대응해야 할까요? [9]	삭제됨9240	23/02/01	9240
168758	[삭제예정] 게임 PGA Tour 2K23 플레이 하시는 분 계세요?	Love.of.Tears.8598	23/02/01	8598
168757	[질문] 토지 보상 감정평가사 선임시 토지주인 사망인 상황 질문입니다.	건이강이별이6685	23/02/01	6685
168756	[삭제예정] 권고사직 이후 프리랜서 계약 [17]	삭제됨8097	23/02/01	8097
168755	[질문] 첫 해외여행 준비물+팁 부탁 드립니다. [19]	마인드머슬커넥션8577	23/02/01	8577
168754	[질문] 동대문구 답십리역 근처에 교수님들 모시고 회식할만한 식당 추천 부탁드립니다. [1]	아카데미8971	23/02/01	8971

목록 이전 다음

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

맨 위로

PGR21.com

통합규정 1.3 이용안내 인용