슬라이드토글...스크립트 질문입니다!

슬라이드토글...스크립트 질문입니다!

QA

슬라이드토글...스크립트 질문입니다!

본문


<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();
})

해보시기 바랍니다.. 

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

회원로그인

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