js 토글 질문입니다!

js 토글 질문입니다!

QA

js 토글 질문입니다!

본문

새해 복 많이 받으세요~

낼이 설인데 답변이 언제쯤 달릴지 모르겠네요...

 

js 토글 질문을 또 드립니다.

테스트 페이지는 여기입니다.

 

우선은 구현하고 싶은대로 대충 가닥은 잡힌 것 같습니다.

아래 이미지와 같이 연두색 제목쪽에 +開く(열기)를 클릭하면 - 閉じる(닫기)버튼으로 바뀌면서

아래 숨겨둔 내용이 보이게 되고, 각각 따로따로 열고 닫기가 가능합니다.

 

그리고 큰제목(녹색)의 +全て開く (전체열기)를 클릭하면 - 全て閉じる(전체닫기) 버튼으로 바뀌면서

아래 연두색 버튼을 눌렀을 때 나왔던 숨겨둔 내용이 전체가 다 열리고 닫히게 됩니다.

1037399798_1518695099.5959.png

 

각각 따로 클릭해 보는 것에서는 지금 이대로 문제가 없지만,

예를들어,

전체열기(녹색)를 클릭한 상황(전체가 열린상태)에서,

닫기(연두색)버튼을 누르면,  (하나만)

하나는 열려있고, 하나는 닫혀있고 들쑥날쑥한 상황이 됩니다.

(지금은 테스트로 연두색 리스트가 두개지만 더 많이 늘어날 상황입니다)

 

거기에 전체닫기(녹색)를 누르면, 연두색부분의 하위내용이,

열린것은 닫히고, 닫힌것은 열리므로, 이상한 상황이 됩니다.

 

설명이 장황했는데, 직접 링크에 가 보셔서 이렇게 저렇게 클릭해보시면 이해가 가실 것 같습니다.

 

스크립트는 아래와 같이 작성을 했고

 

<script>
$(window).ready(function(){
    $('.subBox').css('display', 'none');
    
    //全て開く閉じるボタン
    $('.allctlbtn').click(function(){
        $('.openBox').slideToggle('slow');
        $('.allctlbtn img').toggleClass('imgbtnOpen imgbtnClose');
        $('.ctlbtn1 img').toggleClass('imgbtnOpen imgbtnClose');
        $('.subList').toggleClass('open');
    });
    $('.allctlbtn2').click(function(){
        $('.openBox2').slideToggle('slow');
        $('.allctlbtn2 img').toggleClass('imgbtnOpen imgbtnClose');
        $('.ctlbtn2 img').toggleClass('imgbtnOpen imgbtnClose');
        $('.subList').toggleClass('open');
    });
    $('.allctlbtn3').click(function(){
        $('.openBox3').slideToggle('slow');
        $('.allctlbtn3 img').toggleClass('imgbtnOpen imgbtnClose');
        $('.ctlbtn3 img').toggleClass('imgbtnOpen imgbtnClose');
        $('.subList').toggleClass('open');
    });
    
    //開く閉じるボタン
    $('.subBox').each(function(){
        $(this).css("height",$(this).height()+"px");
    });
    $(".ctlbtn").click(function () {
        var index = $(".ctlbtn").index($(this));
        $('.subBox').eq(index).slideToggle('slow');
        $('.ctlbtn img').eq(index).toggleClass('imgbtnOpen imgbtnClose');
    });

});
</script>

 

html/css는 링크에서 확인해주시면 감사하겠습니다.

 

오늘 하루 종일 이거랑 씨름했네요..

어떻게 어떻게 여기까지 했는데, 자바스크립트 잘 아시는 분들께는

제가 느끼기보단 어렵지 않은 문제일까 싶어 질문 드려봅니다. ㅠ ㅠ

 

전체열기(녹색)를 눌러서 연두색 부분 전체가 열린 상태에서,

(연두색부분)개별버튼 하나만 닫아도,

전체 닫기를 눌렀을때,  닫혀있는 것이 열리지 않고,

열린 것들만 한꺼번에 닫힐 수 있을까요?

 

잘 부탁드립니다 감사합니다 (__)꾸벅~

 

이 질문에 댓글 쓰기 :

답변 1

$('openbox').slidedown('slow');

$('.allctlbtn img').removeClass('imgbtnOpen ').class('imgbtnClose');

$('.ctlbtn1 img').removeClass('imgbtnOpen ').class('imgbtnClose');

이런식으로 토글말고 닫는걸로 하시면될거 같네요

답변을 작성하시기 전에 로그인 해주세요.
전체 43
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT