토글메뉴 js질문
본문
지난번 질문 (요기) 에서
답변을 얻고 기쁜 마음으로 적용을 해 보았는데요...
일단 원하는 부분을 해결했다고 생각했는데,
같은 부분을 여러개 나열할 상황이라 (지난 질문의 html 내용을 너댓개 나열할 예정)
제가 원하는 움직임은 여기와 같이 첫번째 영역만 보인 후,
두번째 영역을 클릭했을 때 첫번째 영역이 닫히지 않고 그대로
아래로 두번째 영역이 나타나는 형식으로 하고 싶습니다.
그런데 지난번 질문 에서 얻은 답변으로 코드를 넣으면
두번째 영역을 클릭하면 첫번째 영역이 닫히고 그러네요 ㅠ ㅠ
혹시 방법이 없을까요?
답변 3
버튼도 마찬가지로
$('.btn_worksToggle i').eq(index).toggleClass('fa-chevron-circle-down fa-minus-circle');
기존 소스에서 .eq(index) 부분만 추가해주시면 됩니다.
감사합니다!! 잘 해결 되었어요~
와... 정말 ㅠ ㅠ 감사합니다 ...
올해는 자바스크립트 공부를 목표로 해야겠네요 매번 묻기 죄송해서 원 ㅠ ㅠ
<style>
.slideBox { display:none; }
.defaultOpen { display:block }
</style>
<div class="worksToggle">첫번째
<div class="slideBox defaultOpen">
내용1
</div>
</div>
<div class="worksToggle">두번째
<div class="slideBox">
내용2
</div>
</div>
<script>
//slideBox
$(document).ready(function(){
$(".worksToggle").click(function(){
var index = $(this).index();
$('.slideBox').eq(index).slideToggle('slow');
});
});
</script>
더 좋은 방법이 있을것도 같은데 제가 생각해낸 방법은 이 방법인데 원하시는게 맞나 모르겠네요
답변감사합니다.
지난번 질문에서 원하던 것이 열고 닫는 div 밖에 토글버튼이 있는 상황이었어서요...
그 연장선에서 움직임을 만들고 싶은데 어려울까요? 역시 한 군데에 넣어야 하는 걸까요 ㅠ
지금 작업하고 있는 샘플 페이지가 여기입니다...
http://bookmark.weblike.jp/test/works/hall.html
$(".btn_worksToggle").click(function(){
var index = $(".btn_worksToggle").index($(this));
$('.worksToggle').eq(index).slideToggle('slow');
});
로 클래스명만 쓰시는걸로 변경해봤습니다.
제가 임의로 해봤을때는 정상적인데 원하시는게 맞나 모르겠습니다.
아, 정말 감사합니다. 제가 원하는 움직임이 맞았어요!!! ㅠ
그런데, 버튼 아이콘을 펼쳤을 때(마이너스 아이콘)랑 닫았을 때(아래화살표)랑을 다르게 표현하고 싶은데
윗 버튼을 눌러도 아래버튼이 반응을 해버리네요...
이럴 땐 어떻게 해야할까요?
http://bookmark.weblike.jp/test/works/hall.html
여기에 샘플 올려봤습니당 ㅠ
