선택한 요소를 보이지 않게 또는 보이게 하는 방법 - .toggle()

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

.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.
});

 

예제

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

<p class="a">Click to toggle</p>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum.</p>
p.a {
  cursor: pointer;
  font-weight: bold;
}
$( document ).ready( function() {
  $( 'p.a' ).click( function() {
    $( 'p.b' ).toggle( 'slow' );
  });
});
같이 보면 좋은 글

You may like these posts

  • .click() .click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다.   기본형 .click( handler ) 예를 들어 button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다. $( 'button' ).clic…
  • .clone() .clone()은 선택한 요소를 복제합니다.   기본형 .clone( [ withDataAndEvents ] ) 예를 들어 $( '.ab' ).clone().appendTo( 'h1' ); 은 ab를 클래스 값으로 가지는 요소를 복제하여 h1 요소에 넣습니다.  …
  • .children() .children()은 어떤 요소의 자식 요소를 선택합니다.   기본형 .children( [ selector ] ) 예를 들어 $( 'div' ).children().css( 'color', 'blue' ); 는 <div> 요소의 자식 요소의 색을 파란색으…
  • .css() .css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가합니다.   기본형 1 .css( propertyName ) 속성값을 가져옵니다. 예를 들어 $( "h1" ).css( "color" ); 는 <h1> 요소의 스타일 중 color 속성의 값…
  • .attr() .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다.   기본형 1 .attr( attributeName ) 선택한 요소의 속성의 값을 가져옵니다. 예를 들어 $( 'div' ).attr( 'class' ); 는…
  • .before() .before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있습니다.   기본형 .before( content [, content ] ) 예를 들어 $( 'h1' ).before( '<p>Hello</p>'…

Post a Comment