펼친메뉴/내용 클릭한 이미지 변경방법 문의 드립니다.
본문
펼치기전 보여줄 이미지(클릭)가 예를들어 화살표가 아래로 되어 있었다면
펼친후엔 화살표가 위로 바뀐 이미지로 넣으려면 어떻게 변경해야 할까요?
선배님들의 조언 구합니다.^^;
답글 미리 감사 드립니다.
<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>
<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
$('#submenu_toggle2').hide(); //아래이미지 안보이게
$('#submenu_contents2').show(); //위이미지 보이게
이런식으로 적용할 부분에 적용해 주셔야 합니다.
플라이님 빠른 해답 감사합니다.
진심으로 감사의 말씀 드립니다.
아... 다시 자세히 보니, 말씀하신것 처럼 적용이 되어 있긴합니다.
제가 궁금한건 버튼으로 사용할 메뉴가 바뀌게 하려는것 입니다.
버튼메뉴 클릭히 숨겨진 하단의 내용 보이게는 잘되는데 펼쳐진 후 버튼 모양이 아래로 되어 있는걸 위로 된 모양으로 바꾸려고 하는것 입니다....^^;
완전 초보다 보니.... 혹시, 위코드 에서 어떤부분을 추가하면 될까요??
<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로 클릭시 펼친후 적용될 이미지 주소로 반영해 적용해 주시면 됩니다.
감사합니다~^^;
