슬라이드토글...스크립트 질문입니다!
본문
<script>
$(document).ready(function(){
$("#tr_bt").click(function(){
$("#tr_panel").slideToggle(100);
});
});
</script>
위에처럼 드롭다운 스크립트를 만들었습니다.
아래 코드처럼 여러개를 추가하니 처음부분만 드롭다운이 되고 두번째는 안되는데
두번째,세번째 계속적으로 하려면 어떻게 해야 되나요..?
<tr id="tr_bt">
<td class="mining_table_td0">▼</td>
</tr>
<tr>
<td style="padding:0; border:0;">
<div id="tr_panel">dddd<br>dddd<br>dddd<br></div>
</td>
</tr>
<tr id="tr_bt">
<td class="mining_table_td0">▼</td>
</tr>
<tr>
<td style="padding:0; border:0;">
<div id="tr_panel">dddd<br>dddd<br>dddd<br></div>
</td>
</tr>
답변 2
우선은 ID를 사용하지 마시고 Class 를 사용하셔야 합니다. 그이유를 글로 설명하자면 못할것은 없지만
이부분에 대해 공부해보시는것도 좋을 것 같아 따로 그 이유까지는 글로 남기지 않겠습니다.
<script>
$(document).ready(function(){
// # <-은 아이디를 나타내는 부분이니 . <- 을 이용해 class로 변경하시고
$("#tr_bt").click(function(){
$("#tr_panel").slideToggle(100);
});
});
</script>
<tr id="tr_bt" class="click1">
<td class="mining_table_td0">▼</td>
</tr>
<tr>
<td style="padding:0; border:0;">
<div id="tr_panel">dddd<br>dddd<br>dddd<br></div>
</td>
</tr>
<tr id="tr_bt" class="click2">
<td class="mining_table_td0">▼</td>
</tr>
<tr>
<td style="padding:0; border:0;">
<div id="tr_panel">dddd<br>dddd<br>dddd<br></div>
</td>
</tr>
각각의 클래스에 따라 동작할 스크립트를 작성하시면 됩니다.
좀 더 깊이 들어가면 각각의 클릭 이벤트에 어떠어떠한 값을 어쩌구 저쩌구 해서 코드의 길이를 줄이고....
이런건 좀 더 공부하시면 될듯합니다.
일단 버튼을 같은 id로 여러개 주셨다는것부터 오류의 시작이기도 합니다.. 윗분말씀처럼 클래스로 주어서 해야하죠.. 근데 클릭하는 토글로 열리는 tr_panel 또한 전부 열리겠죠(실질적으로 tr_panel도 클래스로 주거나 id값을 다르게 주어야하긴 합니다만..)
여러가지 방법이있겠습니다만 tr_panel에 attr로 데이터를 입력해서 버튼을 클릭했을때 그 버튼에 해당하는 tr_panel을 슬라이트토글 시킨다거나, index값을 활용한다거나 해야겟죠.. 구조가 버튼의 부모에 tr_panel이 있다면 더 작성하기 편했겠지만요..
현재 구조 그대로 두고 시작하시려면 일단 tr_bt과 tr_panel을 전부 클래스로 변경하시고나서
$(".tr_bt").on("click",function(){
$(".tr_panel" , $(this).next()).stop().slideToggle();
})
해보시기 바랍니다..
답변을 작성하시기 전에 로그인 해주세요.
