PGR21.com
- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다.
통합 규정을 준수해 주십시오. (2015.12.25.)
Date 2023/01/30 10:24:22
Name Mindow
Subject [질문] vue3 클릭이벤트를 통해 클래스 제어하여 아코디언 구현하기 스크립트 질문입니다
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
수정 아이콘
하나 열면, 다른건 접히는 기능은 일단 전부 다 닫고, 열려야한 애를 여는 식으로 로직 구성하는 것으로 알고 있습니다.
23/01/30 10:34
수정 아이콘
넵 일단 vue3 초보라서 질문 포인트는 클릭이벤트로 is-folded 클래스를 제어하는게 첫번째입니당...ㅠㅠ
23/01/30 10:39
수정 아이콘
https://bootstrap-vue.org/docs/components/collapse
요런 component framework 적용하시는게 더 좋을 것 같네요~
23/01/30 10:40
수정 아이콘
부트스트랩이나 뷰티파이 등 다른 ui 라이브러리 프레임워크는 안 쓰고 갈 계획이라서요...^^;;
눈물고기
23/01/30 10:41
수정 아이콘
아코디언의 현재 토글 상태값을 ref나 reactive로 관리하시고,
해당 변수를 클래스에 바인딩하시면 됩니다.

다중 토글이 안되는 아코디언의 경우,
모두 닫힌 상태를 기본으로 하되, 열려야 하는 특정 상태값에만 바인딩을 하시면 됩니다.
23/02/02 14:09
수정 아이콘
답변 감사합니다~
초콜릿
23/01/31 00:07
수정 아이콘
:class="{'is-folded' : ref나 reactive로 만든 상태값("뭐"라고 이름을 붙이자면...)}"
그리고 버튼에다가는 @click="뭐=!뭐"
23/02/02 14:09
수정 아이콘
답변 감사합니다~
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
171862 [질문] 음성파일 텍스트 변환 어떻게 하나요? [3] 모아7034 23/07/29 7034
171861 [질문] 알뜰폰 신규번호 만들어서 쓸려면 어디서해야하나요? [8] 본좌7911 23/07/29 7911
171860 [질문] 모니터가 나간(?) 건지 문의드립니다 [5] 유유할때유9280 23/07/29 9280
171859 [질문] 반려동물 키우시는 분들 요즘 냉방 어떻게 하세요? [13] 림샷7393 23/07/29 7393
171858 [질문] [악귀 스포] 악귀 보고 계신 분 자체 평가 어떠신가요? [3] 무한도전의삶6910 23/07/29 6910
171857 [질문] 병원비 안내면 퇴원 못하나요? [4] 솜사탕흰둥이9785 23/07/29 9785
171856 [질문] 허리디스크 시술같은건 최대한 보수적으로 받는게 맞죠? [5] 정공법7763 23/07/29 7763
171855 [질문] 저희집 컴 수명이 이제 얼마나 남았을까요? [29] 젤리롤10404 23/07/29 10404
171854 [질문] 전동 킥보드 사고 [1] 엘리엇8329 23/07/29 8329
171853 [질문] 빙수 드실 때 [20] 프로 약쟁이10731 23/07/28 10731
171852 [질문] 전손처리 가능할까요?? [5] 쓰고이9272 23/07/28 9272
171851 [질문] [야구장]스카이박스 구매 방법이나 구매하신분 [1] 쇄빙11243 23/07/28 11243
171850 [질문] 에어컨 반품 관련 질문입니다. [15] SG워너비9031 23/07/28 9031
171849 [질문] ATX 파워서플라이 보급형 하나 추천 부탁드립니다. [5] Silver Scrapes6370 23/07/28 6370
171848 [질문] 초전도체로 난리인데 실제로 성공하면 어떻게 되는건가요? [12] 스웨트8690 23/07/28 8690
171847 [질문] 냉면 추천부탁드립니다. [14] kogang20017432 23/07/28 7432
171846 [질문] 모기의 계절이 왔습니다. 홈메트 추천좀 부탁드려요 [10] SaNa7912 23/07/28 7912
171845 [삭제예정] 하와이 70대 여성 선물 [2] 오늘내일7653 23/07/28 7653
171844 [질문] 동생 컴퓨터 견적 질문입니다. [9] Serapium9367 23/07/28 9367
171843 [질문] 협의이혼 vs조정이혼 뭐가나을까요 [8] Ika1328804 23/07/28 8804
171842 [질문] 혹시 "시그니"라고 아세요? [14] 백년후 당신에게8410 23/07/28 8410
171841 [질문] 갤s23 관련 질문입니다. [13] 미숙한 S씨8107 23/07/28 8107
171840 [질문] 제모크림은 어떤 원리로 제모가 되나요? [4] goldfish7514 23/07/28 7514
목록 이전 다음
댓글

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