jQuery 강좌 | Methods > .toggle()

.toggle()은 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 합니다.

문법

.toggle( [duration ] [, complete ] )

duration

duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다.

문자로 시간을 정할 때는 따옴표 안에 문자를 넣습니다.

.toggle( 'slow' )

숫자로 시간을 정할 때는 숫자만 넣습니다.

.toggle( 600 )

complete

complete에는 지정한 요소가 나타난 다음 불러올 함수가 들어갑니다.

.toggle( function() {
  // Animation complete.
});

예제 1

http://book.cmsfactory.net/jQuery/V01/Methods/toggle-01.html

Click to toggle을 클릭하면 문단이 사라지고, 다시 클릭하면 문단이 나타나는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Methods | toggle</title>
    <style>
      p.a {
        cursor: pointer;
        font-weight: bold;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $(document).ready( function() {
        $( 'p.a' ).click( function() {
          $( 'p.b' ).toggle( 'slow' );
        });
      });
    </script>
  </head>
  <body>
      <p class="a">Click to toggle</p>
      <p class="b">Lorem ipsum dolor.</p>
  </body>
</html>

예제 2

http://book.cmsfactory.net/jQuery/V01/Methods/toggle-02.html

예제 1과 거의 같습니다. 차이점은 처음에 문단이 보이지 않는 상태에서 시작한다는 것입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Methods | toggle</title>
    <style>
      p.a {
        cursor: pointer;
        font-weight: bold;
      }
      p.b {
        display: none;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $(document).ready( function() {
        $( 'p.a' ).click( function() {
          $( 'p.b' ).toggle( 'slow' );
        });
      });
    </script>
  </head>
  <body>
      <p class="a">Click to toggle</p>
      <p class="b">Lorem ipsum dolor.</p>
  </body>
</html>
Category

Created on 2014-01-28 10:58 | Updated on 2015-07-17 01:19

이 글을 공유하기

Kakao