jQueryでテーブルをゆっくりと表示しようとしています

Question

私は別のテーブルの中にネストされたテーブルを持っています<td>。ユーザーがその<td>の<h3>要素をクリックすると、ネストした表をスライドさせて、jQueryを使用してゆっくりと表示します。私はそれが基本的に働いているが、私は現れているテーブルに問題がある。 jQueryに依頼しているように表示され、ドロップダウンしません。ここにプロジェクトサイトがあります：

「ホームバイヤーのヒント」というバーをクリックしてください。これは私がjQueryを現在結んでいる唯一のアイテムです。ここで

Drop down table

jQueryのは、私が使用しています：ここで

$("h3#homeBuyerTips").click(function() { 
    $("#hidden1").slideDown("slow");     

は、ネストした表のためのCSSです：

#hidden1 { 
    display: none; 
} 

そして、ここではただのアイテムIのためのHTMLです表示しようとしています：

<tr>   
    <td colspan="3"> 
    <h3 id="homeBuyerTips">Home Buyer Tips</h3> 
    <table id="hidden1"> 
     <thead> 
     <th>Email</th> 
     <th>Link</th> 
     <th>Modified</th> 
     </thead> 
     <tr> 
     <td rowspan="3">Home Buyer Tips</td> 
     <td class="link" id="version11"> 
      <a href="http://www.crm-newsletter.com/client-to-client/homeBuyerTips/homeBuyerTip_email1.html" target="_blank">version 1</a> 
     </td> 
     <td class="date">02/05/2012</td> 
     </tr> 
     <tr> 
     <td class="link" id="version12"> 
      <a href="http://www.crm-newsletter.com/client-to-client/homeBuyerTips/homeBuyerTip_email2.html" target="_blank">version 2</a> 
     </td> 
     <td class="date">02/05/2012</td> 
     </tr>   
     <tr> 
     <td class="link" id="version13"> 
      <a href="http://www.crm-newsletter.com/client-to-client/homeBuyerTips/homeBuyerTip_email3.html" target="_blank">version 3</a> 
     </td> 
     <td class="date">02/06/2012</td> 
     </tr> 
     <tr id="previewTitle"><td colspan="3">Preview</td></tr> 
     <tr> 
     <td id="previewWindow1" class="previewWindow" colspan="3" style="background: #FFF; height: 250px; width:780px;"> 
      <h2>Preview Window</h2> 
     </td> 
     </tr> 
    </table> 
    </td> 
</tr> 

ありがとうございます。私のコードをもっと投稿しなければならないかどうか教えてください。

Answer 1

divの中にあなたの#hidden1テーブルをラップし、代わりにその#hidden1を呼び出します。表は、したがって、それはまた、私はあなたが「トグル」それを上下に複数回、それをクリックすることができますslideToggle()の代わりslideDown()その方法を使用すると思い異なっ

を働き、display:table、ないdisplay:blockを持っています。

ここでの例を参照してください：追加 "slideToggle（）" のhttp://jsfiddle.net/QCua9/

Answer 2

jqueryはアニメーションテーブルをサポートしていないと思います。

Slide TABLE element（マークアップなど - に動作していない）

あなたはDIV要素内のテーブル＃のhidden1をラップする場合、期待どおり、slidedownは動作します。

Wrapped in a DIV（作業）