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