[Toggle]
전에 했던 토글토글이랑은 조금 다름
그냥 없어졌다가 나타나는 그런 토글임
.toggle( ) 요렇게 적용하는게 기본
폼을 보고
<style>
div {
width: 100px;
height: 100px;
background-color: green;
border: 1px red solid;
font-style: normal;
font: 900;
}
</style>
<body>
<fieldset>
<legend>toggle([Duration][,콜백함수])함수 첫번째:토글링을 걸을 요소가 하나</legend>
<div id="div"></div>
<button>안보이기</button>
</fieldset>
<fieldset>
<legend>toggle([Duration][,콜백함수])함수 두번째:토글링을 걸을 요소가 두개</legend>
<!--전제 조건:무조건 하나는 display:none
그리고 두 요소의 클래스명 동일하게
-->
<div class="div" style="background-color: red"></div>
<div class="div" style="display: none; background-color: green"></div>
<button>토글링</button>
</fieldset>
</body>
토글링 걸을 요소가 하나 일 때(보였다 안보였다)
$('button:eq(0)').click(function(){
이건 애니효과가 없음
$('#div').toggle(); 애니효과가없음
var div = document.querySelector('#div');
console.log(div.style.display==='');
if(div.style.display==='')
div.style.display ==='none';
else
div.style.display ==='';
애니효과를 넣어 보자
var button = $(this);
$('#div').toggle(
2000, //토글링 걸리는 시간
function(){
var text = button.html();
console.log('토글링완료:',text);
button.html(text==='안보이기'?'보이기':'안보이기') //버튼텍스트도 변경
});
});
토글링 걸을 요소가 두 개 일 때(두 요소가 번갈아 가며 보이기)
$('button:last').click(function(){
$('.div').toggle(2000);
});
두개가 번갈아 가면 toggle되니까 더 간단[ToggleClass]
.toggleClass('속성명')
제이쿼리의 removeClass()/addClass()를 하나의 함수로 구현
간단하니까 그냥 한 번에
스타일
<style>
div{
width:100px;
height: 100px;
background-color: green;
}
.invisible{
display:none;
}
</style>
코드
<script>
$(function(){
$('button').click(function(){
//제이쿼리의 removeClass()/addClass()를 하나의 함수로 구현
$('div').toggleClass('invisible');
$(this).html($(this).html()==='안보이기'?'보이기':'안보이기');
})
});
</script>
폼
<body>
<fieldset>
<legend>toggleClass('클래스명')</legend>
<div></div>
<button>안보이기</button>
</fieldset>
</body>
'학원 > JQUERY' 카테고리의 다른 글
| 12/19 67-1 [JQuery] next/prev/Siblings/Parent (0) | 2022.12.19 |
|---|---|
| 12/16 66-6 [JQuery] hover/one/css (0) | 2022.12.17 |
| 12/16 66-4 [JQuery] slice/filter (0) | 2022.12.17 |
| 12/16 66-3 [JQuery] trigger/LiveDie (1) | 2022.12.17 |
| 12/16 66-2 [JQuery] get/bind (0) | 2022.12.16 |