반응형

toggle 버튼을 이용해서 내가 원하는 부분을 숨길 수도 있고 보이게 할 수도 있다.

 

<html>소스

 

 

1
2
3
4
5
6
7
8
 
<div>
	<div class="text1">안녕하세요!(text1)</div>
	<div id ="text2">안녕하세요!(text2)</div>
	<div><input type="button" id="show_btn" value="show"></div>
	<div><input type="button" id="hide_btn" value="hide"></div>
	<div><input type="button" id="toggle_btn1" value="toggle"></div>
	<div><input type="button" id="toggle_btn2" value="toggle2"></div>  	
</div>

 

 

html 소스코드에 보면 class, id 차이를 줬다.

 

 

이유는 밑에 설명

 

 

<실행화면>

 

 

<jQuery>소스

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
 
$(document).ready(function(e) {
	$('#show_btn').click(function(){	//1번
		$('.text1').show();		
	})
	$('#hide_btn').click(function(){	//2번
		$('.text1').hide();		
	})
	$('#toggle_btn1').click(function(){     //3번
		if($('#text2').is(':visible'))
			$('#text2').hide();
		else
			$('#text2').show();	
	})	
	$('#toggle_btn2').click(function(){      //4번
		$('#text2').toggle('slow');
	})
	
});

 

jQuery로 버튼에 기능을 넣어 주었다.

 

jQuery 소스코드에 2번을 보면 $('hide버튼').클릭(class text1 ).숨겨라 라는 뜻이다.

 

3번은 show(), hide()기능을 조건문으로 toggle 방식을 만든것이고

 

4번은 toggle을 이용해 만든 것이다.

 

3번과 4번은 기능은 똑같지만 toggle을 사용함과 사용하지 않았을 때의 차이다

 

당연히 toggle을 사용함이 깔끔하고 좋다.

 

toggle대신 slideToggle()을 주면 슬라이드 기능이 된 toggle을 볼 수 있다.

예) $('#text2').slideToggle(1500);

 

토글 괄호 안에는 숫자나 'slow', 'fast'로 슬라이드 속도를 줄수있다.

 

text1번과 text2번을 지정할때 class 로 준 div는 '.클래스이름' 으로 주고 id 는 '#클래스이름' 으로 준다.

 

class 는 . (점)

id 는 # (샵)

 

 

 

 

반응형
저작자표시 비영리 변경금지

'Computer Language > Jquery' 카테고리의 다른 글

jQuery 메뉴 효과 hover  (0) 2017.07.30
jQuery (제이쿼리) 사용법  (0) 2017.07.28

+ Recent posts

티스토리툴바