Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
Tags
- includes()
- implode()
- getimagesize()
- 오류
- 중간에추가
- php
- ES6
- 정규식
- 배열
- 노션
- primary_key
- myshortcut
- formula
- explode()
- SQL
- 지직거림
- 동작안함
- jQuery
- error
- JavaScript
- 특수문자 포함여부
- Excel
- 1064
- strpos()
- MySQL
- 서버부하
- 이걸 그렇게 쓸 줄은 몰랐지
- 일부 문자열 포함여부
- 문자열 포함여부
- srtpos()
Archives
- Today
- Total
목록메뉴 (1)
코딩짜는 일상
[Javascript & jQuery] 애니메이션 메뉴 접기/펴기(collapse) - 아코디언 메뉴
메뉴의 서브메뉴를 숨겼다 펼치거나 특정 목차의 컨텐츠 내용을 접었다 펼칠 때 주로 collapse 또는 아코디언을 검색합니다. 찾아보시면 여러가지 방법을 소개하고 있지만 일단 이 글에선 Javascript와 jQuery를 쓰는 방식을 비교해보고자 합니다. 먼저 HTML은 다음과 같습니다. HTML main 1 sub 1 sub 2 sub 3 Javascript 먼저 자바스크립트 입니다. 서브 메뉴의 max-height를 0으로 만들거나 원래 높이로 되돌리는 방식으로 접었다 폈다 하는 컨셉입니다. sub 클래스 스타일에 transition을 추가해주지 않으면 애니메이션 없이 팟 나타났다가 팟 사라집니다. 주의!! jQuery 마지막으로 제이쿼리 입니다. 자바스크립트보다 코드가 훨씬 짧아졌습니다! 서브 메뉴..
IT/Javascript&Jquery
2022. 9. 29. 17:34