펼침 메뉴 시 버튼 이미지 변경
관련링크
본문
선배님들~~^^;
아래처럼 펼침 메뉴 버튼을
누르기전 화살표를 아래로 (▼)
누른후 컨텐츠 보여주고 버튼은 위로(▲)
이미지를 만들어 변경 하려고 하는데 아래처럼 해봐도
계속 처음 이미지(아래로) 버튼만 보입니다.
아래 버튼 이미지로 변경되어 보이게 하려면 어딜 손봐야 할까요?
혼자서 아무리 찾아봐도 이유를 알 수 없어 선배님들 께 문의 드려 봅니다.
<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="위로가기 버튼(클릭전)" id="btn_up" 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="이미지 펼쳐졌을때 보여줄 이미지1" width="70%" >
<img src="이미지 펼쳐졌을때 보여줄 이미지2" 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();
$("#btn_up").attr("src", "아래버튼(클릭후)");
}
});
</script></div>
답변 1
그냥 버튼을 누르게되면 내용이 보여지면서 버튼이미지나 그림이 바뀐다는점을 말씀하시는건지요!
그림대신 폰트어썸 angle-down angle-up으로 대체해서 찍으면
버튼을 위 아래 각각의 상황에 따라 만들어주고
우선 첨에 안보일 버튼 부분에 display:none을 걸어주고..
보여질 내용컨텐츠는 all-content라고 id를 임의로 지어서 이또한 첨에 안보일거니깐
display:none을 걸어준뒤에
스크립트에서 첨에 보여지던 버튼 content_open을 누르면
content_open버튼을 hide로 숨겨지고
숨어있던 content_close은 show로 나오면서
id로 지정해서 숨겨놨던 내용부분 all-content의 display:none이 해제되고
다시 누르면 위의 반대상황..
<i class="fa fa-angle-down"></i> 이렇게 폰트어썸 쓴 부분을 이미지로 대체하시면 이미지가
위아래 바뀜을 알수가 있지않을까 하고..적어보고 갑니다..
이런거 말씀하시는거 아닌가 하고..
<button type="button" class="content_open"> <i class="fa fa-angle-down"></i> </button>
<button type="button" class="content_close" style="display:none"> <i class="fa fa-angle-up"></i> </button>
<div id="all-content" style="display:none">
컨텐츠 내용
</div>
<script>
$(document).ready(function(){
$(".content_open").click(function(){
$(".content_close").show();
$(".content_open").hide();
$( '#all-content' ).toggle();
});
$(".content_close").click(function(){
$(".content_open").show();
$(".content_close").hide();
$( '#all-content' ).toggle();
});
});
</script>
아.. 감사합니다.
위 방법이 잘 안되서 다른방법으로 말씀 방법과 유사하게 해결 하였습니다.
하다보니 버튼을 몇개 만들어서 ID규칙을 만들어서 해봤는데 더 나은것 같습니다.
알려주신 방법도 너무 좋아 잘 참고해서 적용해 보겠습니다.
다시한번 감사 드립니다~~^^;