jquery 질문드려요 ^^;
본문
A이미지를 누르면 해당 이미지가 A-1 이미지로 바뀌고, 그 때 특정한 div B가 열렸리고, 다시 상태가 변한 A-1이미지를 누르면 div B가 닫히면서 A로 바꾸게 하고 싶은데요 코드를 어떻게 짜야 할지 잘 모르겠습니다 ㅠㅠ
A이미지를 attr 속성을 통해서 다른 이미지로 바꾸고, 특정 div B를 열게 하는 것은 toggle로 했었는데 이 두가지를 어떻게 이을 수 있을까요 ㅠㅠ
사실 특정div B의 상태를 체크하려고 조건문으로 is()메서드 visible 도 써봤는데 영 안되네요 ㅠㅠ
간단한 샘플 있으시면 좀 알려주세요 ㅠㅠ
답변 1
만드신 html 코드를 보여 주세요.
그게 답변하는 데에 도움이 됩니다.
아 예 이게 다시 말하자면 '더보기' 동작입니다. 교보문고 같은곳에 보면 서평 란에 더보기로 일부 DIV가 가려져 있다가 더보기 누르면 내용이 나오는데 그 순간 더보기 버튼이 '닫기'로 바뀌어 있잖아요. 그것입니다. 그 기본적인 동작을 못해가지고 지금 이러고 있네요 ㅠㅠ
<div class="cont"><img src="img/sub1.jpg"></div>
<div class="more">
<p class="buttonin"></p>
<div class="fold" style="width:100%;height:500px;background-color:#e0e0e0;display:none;"></div>
</div>
</div>
$(function(){
$('.buttonin').click(function() {
$('.fold').toggle();
});
});
요렇게 짰습니다. .fold 클릭 시 buttonin 클래스에 buttonout 클래스를 붙일 수 있나요? 또 다시 한번 클릭시 buttonout 클래스가 빠지면 될거 같습니다. ㅠㅠ
.buttonin{width:53px;height:53px;margin:auto;text-align:center;font-size:28px;margin-top:20px;margin-bottom:20px;background-image: url('../img/button.png');}
.buttonout{width:53px;height:53px;margin:auto;text-align:center;font-size:28px;margin-top:20px;margin-bottom:20px;background-image: url('../img/buttonout.png') !important;}
버튼인, 버튼 아웃 클래스 차이입니다.
$(function() {
$(".fold").on("click", function() {
if($("p").hasClass("buttonout")) {
$("p").removeClass("buttonout");
} else {
$("p").addClass("buttonout");
}
});
});
붙인다 하셔서 그냥 addClass를 한 것입니다.
hasClass, addClass, removeClass
이 세 가지만 보셔도 원하시는 기능 구현 가능할 듯하네요.
