:: 게시판

:: 이전 게시판

- 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

답변 감사합니다~

목록 삭게로! 맨위로

번호	제목	이름	날짜	조회
171618	[질문] 데페이즈망이 사용된 경영 사례(사업아이템)가 뭐가 있을까요? [2]	플래쉬6357	23/07/13	6357
171617	[질문] 일기예보 신뢰도가 높은 곳이 어딜까요? [26]	axis9301	23/07/12	9301
171616	[질문] 자전거 타다 벌레랑 부딪혔는데 정체가 뭘까요 [2]	대출 30년9251	23/07/12	9251
171615	[질문] 내일 도쿄에 가는데 프로야구를 직관하고 싶습니다. [3]	커티삭6541	23/07/12	6541
171614	[질문] 분실휴대폰 우체통 [10]	소주의탄생9701	23/07/12	9701
171613	[질문] 서천 쪽에 비 올 때 가볼만한 곳 없을까요? [7]	귀여운호랑이6696	23/07/12	6696
171611	[삭제예정] kt 쓰시는 분들 통신상태 확인 해주실수있을까요? [6]	삭제됨6975	23/07/12	6975
171610	[질문] 스마트폰 게임 중 플스 게임패드로 할 수 있는게 있을까요? [7]	안녕!곤6494	23/07/12	6494
171609	[질문] (완료) 화학질문 에탄올의 요오드포름 반응 [2]	스핔스핔7046	23/07/12	7046
171608	[질문] 영화에 나오는 쌍둥이폰 해킹 이거 흔한편인가요? [4]	던돌6630	23/07/12	6630
171607	[질문] 갤럭시 S23 VS 아이폰 15 선택 문의 드립니다. [33]	포커페쑤7844	23/07/12	7844
171606	[질문] 남매가 서로 친한게 가능한가요? [46]	황제의마린10269	23/07/12	10269
171605	[질문] 초등아이 둘과 부산여행 장소 추천 부탁드립니다. [5]	수리부엉이9689	23/07/12	9689
171604	[질문] 조깅할때 몸이 가렵습니다 [10]	꿀행성7728	23/07/12	7728
171603	[삭제예정] 이별 후 3개월 만에 재회, 다시 만날 수 있을까요? [32]	삭제됨7714	23/07/12	7714
171602	[질문] kbs 수신료 안내는법 아시는분? [5]	리얼월드7472	23/07/12	7472
171601	[질문] 태블릿을 오랫동안 거치대에 고정시켜놓으면 변형이 오거나 하진 않나요?? [8]	OneCircleEast7734	23/07/12	7734
171600	[질문] 종각역 근처나 종로부근 무료주차 [3]	오하이오7035	23/07/12	7035
171599	[질문] 외장하드 질문드립니다. [7]	보아남편6836	23/07/12	6836
171598	[질문] 눈물쏟는 신파영화 부탁합니다. [59]	기술적트레이더7767	23/07/11	7767
171597	[질문] 디아블로4 렉이 이정도로 생기는게 원래 있는일인가요? [10]	카오루10492	23/07/11	10492
171596	[질문] 통풍약 복용 고민 [10]	퍼피별7761	23/07/11	7761
171595	[질문] 근육을 늘리기위해서 단백질을 얼마나 먹어야하나요 [13]	시무룩8368	23/07/11	8368

목록 이전 다음

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

맨 위로

PGR21.com

통합규정 1.3 이용안내 인용