js 토글 질문입니다!
본문
새해 복 많이 받으세요~
낼이 설인데 답변이 언제쯤 달릴지 모르겠네요...
js 토글 질문을 또 드립니다.
우선은 구현하고 싶은대로 대충 가닥은 잡힌 것 같습니다.
아래 이미지와 같이 연두색 제목쪽에 +開く(열기)를 클릭하면 - 閉じる(닫기)버튼으로 바뀌면서
아래 숨겨둔 내용이 보이게 되고, 각각 따로따로 열고 닫기가 가능합니다.
그리고 큰제목(녹색)의 +全て開く (전체열기)를 클릭하면 - 全て閉じる(전체닫기) 버튼으로 바뀌면서
아래 연두색 버튼을 눌렀을 때 나왔던 숨겨둔 내용이 전체가 다 열리고 닫히게 됩니다.
각각 따로 클릭해 보는 것에서는 지금 이대로 문제가 없지만,
예를들어,
전체열기(녹색)를 클릭한 상황(전체가 열린상태)에서,
닫기(연두색)버튼을 누르면, (하나만)
하나는 열려있고, 하나는 닫혀있고 들쑥날쑥한 상황이 됩니다.
(지금은 테스트로 연두색 리스트가 두개지만 더 많이 늘어날 상황입니다)
거기에 전체닫기(녹색)를 누르면, 연두색부분의 하위내용이,
열린것은 닫히고, 닫힌것은 열리므로, 이상한 상황이 됩니다.
설명이 장황했는데, 직접 링크에 가 보셔서 이렇게 저렇게 클릭해보시면 이해가 가실 것 같습니다.
스크립트는 아래와 같이 작성을 했고
<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');
이런식으로 토글말고 닫는걸로 하시면될거 같네요