jQueryネストした表を使用したアニメーションの問題

Question

ネストした表でjQueryを使用するアニメーションに問題があります。私は小さなツリービューのようなテーブルを作成したいと思っています。+/-をクリックして、クリックした行の詳細を表示します。

アニメーションがInternet Explorer 6.0以降とFirefoxの両方で動作するように、次のコードを変更するにはどうすればよいですか？

マークアップやjavaScriptを変更することはできますが、動作する限り問題はありません。

これがわかりやすい場合、この構造はasp.netのネストされたリピータを使用して生成されます。 TelerikのradAjaxコントロールスイートにアクセスできましたが、radGridをネストしたテーブルで使用することができませんでした。

文書構造：

<tr> 
     <th>&nbsp;</th> 
     <th>Code</th> 
     <th>Title</th> 
    </tr> 


    <tr> 
     <td><span class="TreeCollapseSign">-</span></td> 
     <td>WAA-864R</td> 
     <td>Code 1 ... some details ... - MODULE 2</td>   
    </tr> 

    <tr> 
     <td colspan="6"> 
      <table>  
       <tr> 
        <th>Extra Info 1</th> 
        <th>Extra Info 2</th> 
        <th>Extra Info 3</th> 
       </tr> 

       <tr> 
        <td>Some info...</td> 
        <td>Some more info...</td> 
        <td>Yet more Info</td> 
       </tr>         
      </table> 
     </td> 
    </tr> 
</table> 

Javascriptを：

<script type="text/javascript"> 
    (function($) { 
     $(document).ready(function(){ 

      $(".TreeCollapseSign").data("visible", true); 

      $(".TreeCollapseSign").click(function(){ 

       if ($(this).data("visible")) { 
        $(this).parent().parent().next().fadeOut().end().end().end().data("visible", false).text("+");     
       } else { 
        $(this).parent().parent().next().fadeIn().end().end().end().data("visible", true).text("-"); 
       } 

      }); 
     }); 
    })($) 
</script> 

Answer 1

は、あなたの代わりに、テーブルのULを使用するために、出力コードを変更することができますか？

可能であれば、jQuery Treeview pluginをご覧ください。それは私がすべてのツリービューに使うものです。

実際には、ツリービューのテーブルではなくULを使用するほうが意味がありますが、コードを変更する可能性があります。

とにかくできない場合は、TRを消すことはできないと思います...私は過去に同様の問題があったので、代わりに内側のテーブルをフェードアウトしてから、TR 。

また、end（）を3回呼び出しても意味がありません。

var innerTable = $(this).parent().parent().next().find("table"); 
if ($(this).data("visible")) { 
    innerTable.fadeOut(); 
    innerTable.parent().hide(); 
    $(this) 
    .data("visible", false) 
    .text("+"); 
} else { 
    innerTable.parent().show(); 
    innerTable.fadeIn(); 
    $(this) 
    .data("visible", true) 
    .text("-"); 
}