슬라이드 메뉴
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이 빠지면 두번 클릭해야 동작한다.
'jQuery' 카테고리의 다른 글
조작하려는 엘리먼트 선택하기 (0) | 2011.06.20 |
---|---|
텍스트 메뉴 롤오버 (0) | 2011.06.01 |
JQuery 플러그인 (0) | 2011.04.06 |
택스트 on_off 탭메뉴 1 (0) | 2011.01.27 |
tree 메뉴 (0) | 2010.10.14 |