0

私はテーブルを持っています。各行はレコードです。jqueryを介して行（レコード）をクリックすると、その下に新しいTRを作成し、AJAXを介して新しいテーブル（上記のレコードに関連するデータの関連サブセット）を挿入します。これが最初にロードされてから、アニメーションでTRを展開します。

よさそうだ。

ロードされて展開されたので、このTRを簡単に切り替えて、AJAXを介してコンテンツを再ロードせずに折りたたんで展開できるようにします。

明白で最も単純なオプションは、トリガーのイベントハンドラーを変更し、それにTOGGLEイベントを与えることです。

機能的には、これは機能します。美的には、しかし、それは完全に混乱しています。

最初に.toggleして閉じると、新しいTRの内容は適切に折りたたまれますが、TRが完全に折りたたまれるまで親テーブルの残りの部分は続きません。その後、親テーブルはすぐに折りたたまれてギャップを埋めます。これは耳障りです。

次に、開くための次の.toggleで、子テーブルは親テーブルの外側でアニメーション化され、すぐにその幅を折りたたむ。また、非常に耳障りで、親に比べて非常に狭いテーブルが残っています。

トグルイベントからアニメーションを省略した場合、適切なトランジションがなくても、正常に機能します。これはおそらく、jQueryに関連するCSSに関連していると思いますか？この不安定な視覚的動作が発生しないようにするために、CSSに関して何を宣言する必要があるかについての指針はありますか？

編集：マットの要求ごとに、マークアップ/スクリプト：

<!-- tr of parent table -->
<tr>
    <td><a href="" class="expandable-expanded">link</a></td>
    <td></td>
    <td></td>
</tr>
<!-- this is the tr I create via jQuery and then want to toggle via above link -->
<tr class="expandedContent">
    <td colspan="3">
        <div class="loadedContent" style="display: block;"><div>
        ... my nested table is here ...
        </div></div>
    </td>
</tr>

トグルに使用するjquery：

$("td a.expandable").click(function(){
    //jquery here that does the initial creation of the TR and loading of the AJAX...

    // after loading ajax, remove the event
    $(this).unbind('click');
    // and then attach the new toggle event
    $(this).closest("tr").next("tr.expandedContent").toggle("slow");

    return false;
});
4

2 に答える 2

0

table（およびtr）要素（特に）のアニメーションはheight、せいぜい不安定です。'sなどを使用してマークアップを作成してみてくださいdiv。そうすれば、はるかに幸運に恵まれます。

于 2009-10-26T16:18:04.527 に答える
0

コンテナではなく、ネストされたテーブルを折りたたむ/展開してみてください。

于 2009-10-26T16:03:28.923 に答える