2014-04-18 2 views
1

이것은 쉬운 것이어야합니다. 확장되는 행이있는 표가 필요합니다. 클래스 = "Accordion1"에서 JQuery 아코디언을 구현하려고합니다. 전혀 작동하지 않습니다. 내가 뭘 잘못하고 있니?JQuery 아코디언 th

... 
<script> 
$(function() { 
$("th.Accordion1").accordion(); 
}); 
</script> 
</head> 

<body> 
<table> 
<tbody> 

    <tr> 
     <th colspan="2" class="Accordion1">GROUP 1</th> 
    </tr> 
    <tr> 
     <th>Name</th> 
     <th>Note</th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>-</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>-</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>-</td> 
    </tr> 

    <tr> 
     <th colspan="2" class="Accordion1">GROUP 2</th> 
    </tr> 
    <tr> 
     <th>Name</th> 
     <th>Note</th> 
    </tr> 
    <tr> 
     <td>1</td> 

     <td>-</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>-</td> 
    </tr> 

</tbody> 
</table> 

고마워요!

답변

0

내가이 게시물은 꽤 오래 실현하지만 난 진술 어쨌든 그들을 게시 할 생각 문제에 대한 두 개의 서로 다른 솔루션을 가지고, 어쩌면 누군가가 그것을 감사합니다.

Pen에는 두 가지 옵션이 있습니다.

없이

"그룹 1"과 "그룹 2"를 포함하여 하나 ...

<div class="options" id="op1"> 
    <div class="accordion"> 
     <h3>GROUP 1</h3> 
     <table> 
      <thead> 
       <th>Name</th> 
       <th>Note</th> 
      </thead> 
      <tbody> 
       <tr> 
        <td>1</td> 
        <td>-</td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>-</td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td>-</td> 
       </tr> 
      </tbody> 
     </table> 
     <h3>GROUP 2</h3> 
     <table> 
      <thead> 
       <th>Name</th> 
       <th>Note</th> 
      </thead> 
      <tbody> 
       <tr> 
        <td>1</td> 
        <td>-</td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>-</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

그리고 하나

<div class="options" id="op2"> 
    <table> 
     <thead> 
      <th>Name</th> 
      <th>Note</th> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>-</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>-</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>-</td> 
      </tr> 
     </tbody> 

     <thead> 
      <th>Name</th> 
      <th>Note</th> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>-</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>-</td> 
      </tr> 
     </tbody> 
    </table> 

</div> 

이 당신이 JQuery와 및 jquery-을 포함해야 일을주의하십시오 너! 내가 아코디언과 CSS를 위해 추가 한

옵션은 선택 ...이다;