이전 목록 다음
채택완료

토글메뉴 js질문

nanati
프로필 보기이 회원 글보기이 회원의 댓글보기
 9년 전 4,545

지난번 질문 (요기) 에서 

답변을 얻고 기쁜 마음으로 적용을 해 보았는데요...

 

일단 원하는 부분을 해결했다고 생각했는데, 

같은 부분을 여러개 나열할 상황이라 (지난 질문의 html 내용을 너댓개 나열할 예정)

제가 원하는 움직임은 여기와 같이 첫번째 영역만 보인 후, 

두번째 영역을 클릭했을 때 첫번째 영역이 닫히지 않고 그대로

아래로 두번째 영역이 나타나는 형식으로 하고 싶습니다.

 

그런데 지난번 질문 에서 얻은 답변으로 코드를 넣으면

두번째 영역을 클릭하면 첫번째 영역이 닫히고 그러네요 ㅠ ㅠ

 

혹시 방법이 없을까요?

 

 

 

자바스크립트 js javascript
|

답변 3개 / 댓글 3개

채택된 답변
+20 포인트
블블랙캣77
프로필 보기이 회원 글보기이 회원의 댓글보기
 9년 전

버튼도 마찬가지로  

$('.btn_worksToggle i').eq(index).toggleClass('fa-chevron-circle-down fa-minus-circle');  

기존 소스에서 .eq(index) 부분만 추가해주시면 됩니다. 

답변에 대한 댓글 1개

nanati
프로필 보기이 회원 글보기이 회원의 댓글보기
 9년 전
감사합니다!! 잘 해결 되었어요~
와... 정말 ㅠ ㅠ 감사합니다 ...
올해는 자바스크립트 공부를 목표로 해야겠네요 매번 묻기 죄송해서 원 ㅠ ㅠ
블블랙캣77
프로필 보기이 회원 글보기이 회원의 댓글보기
 9년 전

$(".btn_worksToggle").click(function(){
        var index = $(".btn_worksToggle").index($(this));
        $('.worksToggle').eq(index).slideToggle('slow');
    });

로 클래스명만 쓰시는걸로 변경해봤습니다.

제가 임의로 해봤을때는 정상적인데 원하시는게 맞나 모르겠습니다. 

답변에 대한 댓글 1개

nanati
프로필 보기이 회원 글보기이 회원의 댓글보기
 9년 전
아, 정말 감사합니다. 제가 원하는 움직임이 맞았어요!!! ㅠ
그런데, 버튼 아이콘을 펼쳤을 때(마이너스 아이콘)랑 닫았을 때(아래화살표)랑을 다르게 표현하고 싶은데
윗 버튼을 눌러도 아래버튼이 반응을 해버리네요...
이럴 땐 어떻게 해야할까요?
http://bookmark.weblike.jp/test/works/hall.html
여기에 샘플 올려봤습니당 ㅠ
블블랙캣77
프로필 보기이 회원 글보기이 회원의 댓글보기
 9년 전

Copy 
<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>

더 좋은 방법이 있을것도 같은데 제가 생각해낸 방법은 이 방법인데 원하시는게 맞나 모르겠네요 

답변에 대한 댓글 1개

nanati
프로필 보기이 회원 글보기이 회원의 댓글보기
 9년 전
답변감사합니다.
지난번 질문에서 원하던 것이 열고 닫는 div 밖에 토글버튼이 있는 상황이었어서요...
그 연장선에서 움직임을 만들고 싶은데 어려울까요? 역시 한 군데에 넣어야 하는 걸까요 ㅠ

지금 작업하고 있는 샘플 페이지가 여기입니다...
http://bookmark.weblike.jp/test/works/hall.html

답변을 작성하려면 로그인이 필요합니다.