๋ชฉ๋ก2022/03/10 (3)
whatisthis?
๐ป j-Query ์์ด ๋ง๋ ์์ฝ๋์ธ ๋ฉ๋ด practice - css / js ) j์ฟผ๋ฆฌ ์์ด ์์ฝ๋์ธ๋ฉ๋ด ๋ง๋ค๊ธฐ Accordion Menu (without jQuery) - ๋ณดํต ์์ฝ๋์ธ ๋ฉ๋ด๋ j์ฟผ๋ฆฌ๋ฅผ ์ด์ฉํ๋๋ฐ, j์ฟผ๋ฆฌ์๋ slideToogle ๋ฑ์ ํธ๋ฆฌํ ์ ๋๋ฉ์ด์ ๊ด๋ จ ๋ฉ์๋๊ฐ ์๊ธฐ ๋๋ฌธ! BUT! ๋๋ ์ ์ด์ฟผ๋ฆฌ๋ ๋๋๋ก ์ฐ์ง ์๊ณ ์ถ์ 1ไบบ ์ผ๋ก mywebproject.tistory.com Accordion Menu with jQuery .slideUp() ์ ํํ ์์์ CSS height ์์ฑ๊ฐ์ ๋์ฌ๊ฐ๋ฉฐ ์ฌ๋ผ์ง๊ฒ ํ๋ค. (์ฌ๋ผ๊ฐ๋ฉด์ ์ฌ๋ผ์ง) .slideDown() ์ ํํ ์์์ CSS height ์์ฑ๊ฐ์ ๋ฎ์ถฐ๊ฐ๋ฉฐ ๋ํ๋๊ฒ ํ๋ค. (๋ด๋ ค๊ฐ๋ฉด์ ์ฌ๋ผ์ง) .slideToggle() ์ ํํ ์์..
๐ป j-Query ์์ด ๋ง๋ ์์ฝ๋์ธ ๋ฉ๋ด practice - css / js ) j์ฟผ๋ฆฌ ์์ด ์์ฝ๋์ธ๋ฉ๋ด ๋ง๋ค๊ธฐ Accordion Menu (without jQuery) - ๋ณดํต ์์ฝ๋์ธ ๋ฉ๋ด๋ j์ฟผ๋ฆฌ๋ฅผ ์ด์ฉํ๋๋ฐ, j์ฟผ๋ฆฌ์๋ slideToogle ๋ฑ์ ํธ๋ฆฌํ ์ ๋๋ฉ์ด์ ๊ด๋ จ ๋ฉ์๋๊ฐ ์๊ธฐ ๋๋ฌธ! BUT! ๋๋ ์ ์ด์ฟผ๋ฆฌ๋ ๋๋๋ก ์ฐ์ง ์๊ณ ์ถ์ 1ไบบ ์ผ๋ก mywebproject.tistory.com Accordion Menu with jQuery - ๋๋ ์ ์ด์ฟผ๋ฆฌ์ ๋ฌด๊ฑฐ์์ ๊ธฐํผ + ๊ธฐ๋ณธ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ถฉ์คํ์! ๋ ๋ง์ธ๋๋ก ์ฌํ jQuery๋ฅผ ๊ตณ์ด ์์ผ์๋ค. - But. ์ธ์ ๊ฐ ์ ์ด์ฟผ๋ฆฌ๋ฅผ ์จ์ผํ ๋๊ฐ ์๊ณ , ํ์ฌ ๋ง์ ํ์ด์ง๋ค์ด ์ ์ด์ฟผ๋ฆฌ๋ก ๊ตฌ์ฑ๋์ด์์ผ๋ฏ๋ก ์๊ณ ๋ ์์ด์ผ ํ๋ค (...) ๋ฐ๋ผ์, ๊ฐ๋จํ..
Accordion Menu (without jQuery) - ๋ณดํต ์์ฝ๋์ธ ๋ฉ๋ด๋ j์ฟผ๋ฆฌ๋ฅผ ์ด์ฉํ๋๋ฐ, j์ฟผ๋ฆฌ์๋ slideToogle ๋ฑ์ ํธ๋ฆฌํ ์ ๋๋ฉ์ด์ ๊ด๋ จ ๋ฉ์๋๊ฐ ์๊ธฐ ๋๋ฌธ! BUT! ๋๋ ์ ์ด์ฟผ๋ฆฌ๋ ๋๋๋ก ์ฐ์ง ์๊ณ ์ถ์ 1ไบบ ์ผ๋ก .. (๋ฌผ๋ก ์ง๊ธ ๋ง์ ํ์ด์ง๋ค์ด ์ ์ด์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฏ๋ก ๋ฐฐ์ฐ๋๊ฒ์ ํ์๋ผ ์๊ฐ) ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ง์ ์ฌ์ฉํด์ ํ๋ฒ ๊ตฌํํด๋ด์ผ๊ฒ ๋ค๊ณ ์๊ฐํ๋ค. - css ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํด๋ฆญ์ด๋ฒคํธ๋ง๋ค class ์ถ๊ฐ / ์ญ์ >> ์ด๋ํ j์ฟผ๋ฆฌ๋ toogleClass ๋ฉ์๋๋ก if-else๋ฌธ ์์ด ๊น๋ํ๊ฒ ๊ฐ๋ฅํ์ง๋ง .. - ํผ์น๊ณ ์ ๋ +, - ์์ด์ฝ์ flex๋ง์ผ๋ก ๊ตฌํ + ์ ๋๋ฉ์ด์ (ํธ๋ ์ง์ ) ๐ป ๐ ์ค์ตํ๋ฉด์ ์๊ฒ๋ ์ ๊ธฐ๋ก ๐ css :hover์ ์ ํ์ ์> div:ho..