jQuery
슬라이드 메뉴
라크젠
2011. 5. 23. 10:28
.hasClass
매치되는 엘리먼트에 매개변수로 전달받은 클래스명이 있는지 확인한다.
일치하는 클래스명이 있으면 true, 없으면 false를 반환한다.
*********************************************************************************************
h2 {cursor:pointer;}
.none {display:none;}
.list {cursor:pointer;}
function slide(obj) {
if( jQuery(obj).hasClass("on") ) {
jQuery(obj).find('.test').slideUp();
jQuery(obj).removeClass("on");
jQuery(obj).find("h2").addClass("on");
} else {
jQuery(obj).find('.test').slideDown();
jQuery(obj).addClass("on");
jQuery(obj).find("h2").removeClass("on");
}
}
<div class="list on" onclick="slide(this)">
<h4>열렸다닫힘</h4>
<div class="test">내용입니다.</div>
</div>
<div class="list" onclick="slide(this)">
<h4>열렸다닫힘</h4>
<div class="test none">내용입니다.</div>
</div>
<div class="list" onclick="slide(this)">
<h4>열렸다닫힘</h4>
<div class="test none">내용입니다.</div>
</div>
*************************************************************************************
첫번째 list 그룹에서 on이 빠지면 두번 클릭해야 동작한다.
매치되는 엘리먼트에 매개변수로 전달받은 클래스명이 있는지 확인한다.
일치하는 클래스명이 있으면 true, 없으면 false를 반환한다.
*********************************************************************************************
h2 {cursor:pointer;}
.none {display:none;}
.list {cursor:pointer;}
function slide(obj) {
if( jQuery(obj).hasClass("on") ) {
jQuery(obj).find('.test').slideUp();
jQuery(obj).removeClass("on");
jQuery(obj).find("h2").addClass("on");
} else {
jQuery(obj).find('.test').slideDown();
jQuery(obj).addClass("on");
jQuery(obj).find("h2").removeClass("on");
}
}
<div class="list on" onclick="slide(this)">
<h4>열렸다닫힘</h4>
<div class="test">내용입니다.</div>
</div>
<div class="list" onclick="slide(this)">
<h4>열렸다닫힘</h4>
<div class="test none">내용입니다.</div>
</div>
<div class="list" onclick="slide(this)">
<h4>열렸다닫힘</h4>
<div class="test none">내용입니다.</div>
</div>
*************************************************************************************
첫번째 list 그룹에서 on이 빠지면 두번 클릭해야 동작한다.