슬라이드 토글 질문 한 번 해봅니다...
본문
안녕하세요 선생님들 슬라이드 토글에대해 궁금한점이있어서 질문해봅니다...
일단 제가 하나에 대한 슬라이드 토글을 아래 코드와같이 작성을 했습니다.
<div class="a">
<button class="b">펼치기/숨기기</button>
<div class="c">
박스
<div class="d">닫기</div>
</div>
</div>
$(document).ready(function(){
$(".b").click(function(){
$(".b").toggleClass("e");
$(".c").slideToggle(800);
})
$(".d").click(function(){
$(".b").removeClass("e")
$(".c").slideUp(800);
});
});
이렇게 했을때 버튼이 더 늘어나게되면 id로 값을 해두면 하나만열리고 class로 값을 해두면 전체가 열리고 하는데 이 부분을 juquery의 next 이런부분을 사용하면 해결이 되나요?
어떻게하는지 잘 모르겠어서 질문 올려봅니다...
답변 1
버튼 클래스를 동일하게 주시구요,
$(this) 를 사용해서 접근해보세요,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<div>
<button class="toggle_btn">펼치기/숨기기</button>
<div class="toggle_content">
내용A
<div class="close_btn">닫기</div>
</div>
</div>
<div>
<button class="toggle_btn">펼치기/숨기기</button>
<div class="toggle_content">
내용B
<div class="close_btn">닫기</div>
</div>
</div>
<div>
<button class="toggle_btn">펼치기/숨기기</button>
<div class="toggle_content">
내용C
<div class="close_btn">닫기</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.toggle_btn').click(function() {
$(this).siblings('.toggle_content').slideToggle();
});
$('.close_btn').click(function() {
$(this).parents('.toggle_content').slideUp();
})
});
</script>
감사합니다 선생님 이 자체는 작동이됩니다.
하나 궁금한게있는데요 button 에 div 를 씌우면 작동을 하지 않던데 div 를 씌우면 다르게 스크립트를 넣어야하나요?
div를 두번정도 감싸야하는데 작동을 하지않아서요... 한번 감쌋을때 this 에 상위 class명은 이해한거같ㅅ급니다
네 ,
$(this).siblings('.toggle_content')
구문이 현재 클릭된 요소의 형제 중에 .toggle_content 를 찾아가는거기 때문에,
버튼을 div로 감싸면 클릭한 .toggle_btn 과 매칭되는 .toggle_content가 siblings 가 아니기 때문에 동작을 안하게되는거구요,
위치를 자유롭게 하고 싶으시면
<button class="toggle_btn" target="a_content">펼치기/숨기기</button>
이런식으로 target이라는(이름 상관없음) 속성과 값을 정의해놓으시고
내용부분에는
<div class="toggle_content a_content">
이렇게 클래스 추가해주시고
let target = $(this).attr('target');
$('.toggle_content.' + target).slideToggle();
이런식으로 접근이 가능합니다~
거듭 귀찮게 해드려서 죄송합니다.
제가
div 를 전체 두번감싸고 말씀해주신대로 하긴했는데요.
<div>
<div>
<div>
<button class="toggle_btn" target="a_content">펼치기/숨기기</button>
</div>
</div>
<div class="toggle_content a_content">
내용A
<div class="close_btn">닫기</div>
</div>
</div>
<div>
<div>
<div>
<button class="toggle_btn" target="a_content">펼치기/숨기기</button>
</div>
</div>
<div class="toggle_content a_content">
내용B
<div class="close_btn">닫기</div>
</div>
</div>
<div>
<div>
<div>
<button class="toggle_btn" target="a_content">펼치기/숨기기</button>
</div>
</div>
<div class="toggle_content a_content">
내용C
<div class="close_btn">닫기</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.toggle_btn').click(function() {
let target = $(this).attr('target');
$('.toggle_content.' + target).slideToggle();
});
$('.close_btn').click(function() {
$(this).parents('.toggle_content').slideUp();
})
});
</script>
일단 테스트 해보기위해 선생님말씀대로 수정을 해보았는데요 선생님이 생각하신 구성이 이게 맞을까요?
이상대로 했을땐 그 각각 펼쳐지는게 또 작동을하지않고 어느 버튼을 눌러도 전체가 작동을해서 질문올립니다...죄송합니다././.
아 target 의 값은 다 다르게 , 그 목적하는 곳에 맞게 해야해요 ㅎㅎ
