๋จผ์ ํ๋ฅญํ ํจํค์ง์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
๋ ๋ฒ์งธ๋ก ํด๋ฆญํ ๋ ํน์ ๋ก๊ทธ ํ์ด ๋ซํ์ง ์๋๋ก ํ๋ ๊ฒ์ด ํฌ๊ฒ ๊ฐ์ ๋ ๊ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
ํ์ ๋ซ์ผ๋ ค๋ฉด ๋๋ณด๊ธฐ ๋ชจ์์ ์์ด์ฝ ๋ฒํผ์ ํด๋ฆญํด์ผ ํฉ๋๋ค.
๊ทธ ์ด์ ๋ ํ์์ ์ผ๋ถ ๋ด์ฉ์ ๋ณต์ฌํ๋ ๊ฒ์ด ํธ๋ฆฌํ ๊ฒฝ์ฐ๊ฐ ๋ง๊ธฐ ๋๋ฌธ์ ๋๋ค. ๊ทธ๋ ๊ฒ ํ๋ ค๋ฉด ๋ถ๋ช ํ ํ ์คํธ๋ฅผ ํด๋ฆญํ์ฌ ๊ฐ์กฐ ํ์ํด์ผ ํ์ง๋ง ์ด๋ ๋ถํธํ๊ฒ๋ ํ์ ๋ซ์ ๋ฟ์ ๋๋ค.
ํฐ ๋ ธ๋ ฅ์ ํด์ผ๋ง ํ ์คํธ๋ฅผ ์ ํํ ์ ์์ต๋๋ค. ์ฒ์์ ๊ฐ์กฐ ํ์ํ๊ณ ํ์ด ๋ซํ ๋๊น์ง ๊ธฐ๋ค๋ ธ๋ค๊ฐ ๋๋ณด๊ธฐ๋ก ๋ค์ ์ฝ๋๋ค.
๋๋ ๋ฐ์์ ๊ฒฝํ์ด ์์ง๋ง jquery๊ฐ ์๋๊ธฐ ๋๋ฌธ์ ์์ง ํ๋ก ํธ ์๋์ ๋ํ ์ฝ๋๋ฅผ ๋ณด์ง ์์์ต๋๋ค.
ํ ์์ฒด ๋์ ๋ฒํผ์ ์ฌ์ฉํ๋๋ก ํ ๊ธ์ ๋ณ๊ฒฝํ๋ ๊ฒ์ ๊ทธ๋ฆฌ ์ด๋ ต์ง ์์ ๊ฒ์ผ๋ก ๋ํ๋ฌ์ต๋๋ค.
์๋์
$('.table-container tr').on('click', function () {
$('#' + $(this).data('display')).toggle();
});
์๋ก์ด
$('.table-container tr button').on('click', function () {
$('#' + $(this).data('display')).toggle();
});
๋ค๋ฅธ ์ฌ๋๋ค์ด ์ด๊ฒ์ด ํจํค์ง ๊ธฐ๋ณธ ๋์์ด ๋ ๊ฐ์น๊ฐ ์๋ค๊ณ ์๊ฐํ๋ค๋ฉด ๋๋ PR์ ํ ์ ์์ต๋๋ค.
์ค, ๋ด๊ฐ ์ด "์๋ฒฝํ๊ฒ ์ค๊ณ๋" UX๋ก ์ธํด ์ผ๋ง๋ ๊ณ ํต๋ฐ๋์ง ๋งํ ์์กฐ์ฐจ ์์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
ํ ์์ฒด ๋์ ๋ฒํผ์ ์ฌ์ฉํ๋๋ก ํ ๊ธ์ ๋ณ๊ฒฝํ๋ ๊ฒ์ ๊ทธ๋ฆฌ ์ด๋ ต์ง ์์ ๊ฒ์ผ๋ก ๋ํ๋ฌ์ต๋๋ค.
์๋์
์๋ก์ด
๋ค๋ฅธ ์ฌ๋๋ค์ด ์ด๊ฒ์ด ํจํค์ง ๊ธฐ๋ณธ ๋์์ด ๋ ๊ฐ์น๊ฐ ์๋ค๊ณ ์๊ฐํ๋ค๋ฉด ๋๋ PR์ ํ ์ ์์ต๋๋ค.