오중호랑이의 비밀로그

jQuery 숨기고 보이는 레이어 본문

개발이야기/호랑이와 jQuery

jQuery 숨기고 보이는 레이어

오중호랑이 2013.12.11 17:38

이번시간에는 평소에 많이 쓰이는 특정 element (이곳 예시에선 div)를 숨기고(hide), 보이게(show)만들어 봅니다.

쭈욱 따라 오셨다면 굉장히 간단합니다.
미리 보여줄 element를 CSS를 사용하여 미리 숨겨 놓고 (display:none) 특정 element를 클릭했을때 보여주면 됩니다.

오늘 사용할 메소드는 .hide().show()입니다.

위 스크린샷과 같이 좁은 해상도에서나, 자주쓰지 않은 메뉴를 미리 숨겨 놓고 팝업식으로 불러오면 공간효율과 함께 깔끔한 디자인도 얻을 수 있습니다.

숨기기/보이기
....

자 위와 같이 보기쉽고 간단하게 예제를 만듭니다.

간단하죠?

우린 아이디가 toggleButton인 곳을 '클릭' 했을때 moreMenu의 상태에 따라 css의 'display'의 속성을 바꿔주면 됩니다. 아래와 같이 말이죠

		$(document).ready(function(){ //DOM이 준비되고
			$('#toggleButton').click(function(){ // ID가 toggleButton인 요소를 클릭하면
				var state = $('#moreMenu').css('display'); // state 변수에 ID가 moreMenu인 요소의 display의 속성을 '대입'
				if(state == 'none'){ // state가 none 상태일경우 
					$('#moreMenu').show(); // ID가 moreMenu인 요소를 show();
				}else{ // 그 외에는
					$('#moreMenu').hide(); // ID가 moreMenu인 요소를 hide();			
				}
			});
		});

위 코드를 보시고 의문을 가질 수 있어요! show()와 hide()가 요소를 보이거나 숨겨주는건 알겠는데 과연 DOM/HTML소스/CSS 에는 어떠한 변화가 있나 궁금할 수 있어요!

직접 확인해보면 됩니다. 앞 장부터 천천히 따라오신분들은 파이어폭스+파이어버그를 설치 하셨을꺼에요 (다른 브라우저와 개발자도구를 이용해도 되지만 여기에선 익숙한 대로 파이어폭스+파이어버그 조합을 사용합니다.)

▲예제 문서를 처음 열었을때 입니다. #moreMenu는 숨겨진 상태로 이녀석의 CSS는 display:none을 가지고 있네요.

▲#toggleButton을 한번 클릭 했을때 상태 변화입니다.

이렇게 직접 해봄으로써 알 수 있듯이 .show()는 요소의 css의 display를 'block'으로 바꾸어주며, hide는 'none'로 바꿔줍니다. 어떨까요, 직접 해보니까 더 쏙쏙 잘들어오는듯 합니다.

정말 짧은 줄의 코드로 숨기고 보이는 레이어를 만들었는데요 사실은 jQuery에서 미리 준비해놓은게 있답니다. 바로 .toggle()라는 녀석이죠.

이 녀석은 똑똑합니다. 굉장히 똑똑합니다. 보이고/숨길 요소에 한번만 적용해주면 알아서 판단해서 보여주거나 숨겨줍니다.

		$(document).ready(function(){ //DOM이 준비되고
			$('#toggleButton2').click(function(){ // #toggleButton2를 클릭하면
				$('#moreMenu2').toggle(); // #moreMenu2를 알아서 토.글!
			});
		});

이렇게 사용하면 됩니다. 어때요! jQuery는 어차피 해야할일을 좀 더 편하게 사용할 수 있게 해주는 자바스크립트 프레임워크입니다.

example05.zip

잠깐! 예제가 준비되어있습니다. 잘 모르시겠으면 다운받아서 직접 해보시고 소스도 구경해보세요.

'개발이야기 > 호랑이와 jQuery' 카테고리의 다른 글

jQuery 숨기고 보이는 레이어  (7) 2013.12.11
jQuery 폼 컨트롤 하기  (12) 2013.02.18
jQuery 요소를 컨트롤 하기  (0) 2013.02.16
jQuery ready와 load의 차이  (17) 2013.02.16
jQuery 시작하기  (0) 2013.02.15
7 Comments
  • 숑이 2015.10.13 11:08 신고 잘보고갑니다 너무 도움되요.
    오중호랑이님 비밀로그 홈페이지처럼
    좌측에 목록클릭시 메뉴가 열리고 닫기는거는 어떻게 하는지 알수 있을까요?ㅠ_ㅠ
  • 오중호랑이 2015.10.14 15:26 신고 이것은 요소를 애니메이션으로 만들어주는 .animate()와 css를 변경해주는 .css()를 이용하여 구현가능합니다.

    정확한 API는 http://api.jquery.com에서 animate와 css로 검색해보시면 됩니다^^
  • 히히 2015.12.03 08:25 신고 이소스필요해서 여러군대 검색했는데 여기서 결과를 얻네요.
    다른건 기본 오픈이 되어있어서 기본 닫혀잇는 상태 소스를 찾고잇엇는데...
  • 오중호랑이 2015.12.03 10:50 신고 기본 닫혀있게 하고싶은 요소에 display:none을 해주시면 됩니다!!
  • 신쨩 2015.12.15 09:51 신고 jquery 강의 잘보고 갑니다. ㅎㅎ

    근데 한가지 궁금점이있는데요

    jquery에서는 모든 소스(?)를 $(document).ready(function() {}); 요기 안에다가 쓰나요??

    예를들어서 <input type="button">이 있다고 가정할 때 자바스크립트를 쓸 땐 <input type="button" onclick="exec()"> 이렇게 onclick을 써서 함수를 실행시키잖아요??

    제이쿼리도 onclick="exec()"를 써서
    <script>
    function exec() {
    //jquery소스
    }
    </script>
    이렇게 쓰면 안되나요? 아니면 보편적인 방법이 아닌건지.. 그냥 function exec() {} 안에다가 적어도 함수는 정상적으로 돌아가긴하는데 뭔가 제이쿼리가 아니고 자바스크립트 같아서요ㅎㅎ;;

    답변 부탁드립니다!
  • 오중호랑이 2015.12.15 11:52 신고 DOM먼저 생성(인풋 버튼 포함 브라우저 객체가 생성)되고 나서 ready method가 실행되기 때문에 그 이후에 선언된 함수는 참조될 수 없습니다.
    $(document).ready(function(){
    function foo(){
    alert(1);
    }
    });
    <input type="button" onclick="foo()">
    로 실행해 보시면 ReferenceError: foo is not defined 에러를 볼 수 있습니다.
    $(document).ready(function(){
    function foo(){
    alert(1);
    }
    foo();
    });
    이러면 어떨까요? DOM생성->Ready메쏘드실행->함수선언->호출->alert이 뜨게 되죠.
    제시 하신대로 쓰셔도 됩니다. 다만 어떤 순서로 load되기 때문에 호출이 가능한지 알고 계시면 좋을것 같고요.
    또 <input type="button" onclick="$(this).hide();">처럼 onclick으로 this접근하면 자기 자신이 불러오게 사용해도 됩니다.
    설명이 잘 됐는지 모르겠네요!
  • 호우호우.. 2018.08.28 13:53 신고 덕분에 너무 예쁜 사이드메뉴바를 만들었어요, 한참을 헤맸는데 귀한 소스 감사드립니당><
댓글쓰기 폼