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