-
jQuery - .toggle()jQuery 2020. 6. 23. 19:37
.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. });
예제
- Click to toggle을 클릭하면 문단이 사라지고, 다시 클릭하면 문단이 나타납니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> p.a { cursor: pointer; font-weight: bold; } </style> <script src="//code.jquery.com/jquery-3.3.1.min.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>'jQuery' 카테고리의 다른 글
jQuery - .width() (0) 2020.06.23 jQuery - .toggleClass() (0) 2020.06.23 jQuery - .text() (0) 2020.06.23 jQuery - .slideUp() (0) 2020.06.23 jQuery - .slideToggle() (0) 2020.06.23