펼친메뉴/내용 클릭한 이미지 변경방법 문의 드립니다. 채택완료
정민황
2년 전
조회 6,822
펼치기전 보여줄 이미지(클릭)가 예를들어 화살표가 아래로 되어 있었다면
펼친후엔 화살표가 위로 바뀐 이미지로 넣으려면 어떻게 변경해야 할까요?
선배님들의 조언 구합니다.^^;
답글 미리 감사 드립니다.
</p>
<p><div id="submenu_layer2" style="position:relative; z-index:0; width:100%; max-width:1200px; height:auto; margin:0 auto; padding:0; text-align:center; ">
<div id="submenu_toggle2"><span class="submenu_toggle_btn2" tabindex="0"><img src="펼치기전 보여줄 이미지(클릭버튼)" width="65%" /></span></div>
</p>
<p><div id="submenu_contents2" style="display:inline-block; overflow:hidden; width:100%; margin:0 auto; padding:0; padding-bottom:10px; display:none;"><img src="펼친후 보여줄 이미지경로" width="100%" /></div>
<script>
$('#submenu_toggle2').click(function(e){
$( "#submenu_contents2" ).slideToggle( "fast" );
});
//클릭시 서브내용(이미지 등..) 하단으로 펼쳐지게 하기
$(".submenu_toggle_btn2").keydown(function(e){
if(e.which === 13){
$(this).click();
}
});
</script></div>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
플라이
Expert
2년 전
$('#submenu_toggle2').hide(); //아래이미지 안보이게
$('#submenu_contents2').show(); //위이미지 보이게
이런식으로 적용할 부분에 적용해 주셔야 합니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 4개
�
정민황
2년 전
�
정민황
2년 전
아... 다시 자세히 보니, 말씀하신것 처럼 적용이 되어 있긴합니다.
제가 궁금한건 버튼으로 사용할 메뉴가 바뀌게 하려는것 입니다.
버튼메뉴 클릭히 숨겨진 하단의 내용 보이게는 잘되는데 펼쳐진 후 버튼 모양이 아래로 되어 있는걸 위로 된 모양으로 바꾸려고 하는것 입니다....^^;
완전 초보다 보니.... 혹시, 위코드 에서 어떤부분을 추가하면 될까요??
제가 궁금한건 버튼으로 사용할 메뉴가 바뀌게 하려는것 입니다.
버튼메뉴 클릭히 숨겨진 하단의 내용 보이게는 잘되는데 펼쳐진 후 버튼 모양이 아래로 되어 있는걸 위로 된 모양으로 바꾸려고 하는것 입니다....^^;
완전 초보다 보니.... 혹시, 위코드 에서 어떤부분을 추가하면 될까요??
�
플라이
2년 전
<div id="submenu_layer2" style="position:relative; z-index:0; width:100%; max-width:1200px; height:auto; margin:0 auto; padding:0; text-align:center; ">
<div id="submenu_toggle2"><span class="submenu_toggle_btn2" tabindex="0"><img src="펼치기전 보여줄 이미지(클릭버튼)" width="65%" id="btn_up" /></span></div>
<script>
$('#submenu_toggle2').click(function(e){
$( "#submenu_contents2" ).slideToggle( "fast" );
});
//클릭시 서브내용(이미지 등..) 하단으로 펼쳐지게 하기
$(".submenu_toggle_btn2").keydown(function(e){
if(e.which === 13){
$(this).click();
$("#btn_up").attr("src", "펼친후 보여질 이미지 주소");
}
});
</script></div>
이미지 태그에 id값을 부여해 준후 해당 jquery로 클릭시 펼친후 적용될 이미지 주소로 반영해 적용해 주시면 됩니다.
<div id="submenu_toggle2"><span class="submenu_toggle_btn2" tabindex="0"><img src="펼치기전 보여줄 이미지(클릭버튼)" width="65%" id="btn_up" /></span></div>
<script>
$('#submenu_toggle2').click(function(e){
$( "#submenu_contents2" ).slideToggle( "fast" );
});
//클릭시 서브내용(이미지 등..) 하단으로 펼쳐지게 하기
$(".submenu_toggle_btn2").keydown(function(e){
if(e.which === 13){
$(this).click();
$("#btn_up").attr("src", "펼친후 보여질 이미지 주소");
}
});
</script></div>
이미지 태그에 id값을 부여해 준후 해당 jquery로 클릭시 펼친후 적용될 이미지 주소로 반영해 적용해 주시면 됩니다.
�
정민황
2년 전
감사합니다~^^;
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
진심으로 감사의 말씀 드립니다.