0

誰かが私を助けてくれるなら、jquery コードの再設計について助けが必要です。他のカテゴリをスライドさせずに複数のカテゴリを展開したい。1 つのテーブルをスライドさせるための実際のコードを次に示します。

事前にt​​hnx。

html

<table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

            <table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

            <table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

jquery

$(function() {
    var $research = $('.research');
    $research.find("tr").not('.accordion').hide();
    $research.find("tr").eq(0).show();

    $research.find(".accordion").click(function(){
        $research.find('.accordion').not(this).siblings().fadeOut(500);
        $(this).siblings().fadeToggle(500);
    }).eq(0).trigger('click');
});

http://jsfiddle.net/URh2W/

4

1 に答える 1

1

特に要素をアニメーション化する場合は、テーブルをまったく使用しないでください。代わりに Div を使用することを強くお勧めします!

また、インライン スタイルの使用は絶対に避けてください。特に、インライン幅の宣言は避けてください。

JSFiddle は次のとおりです。

http://jsfiddle.net/Ec3hJ/

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div class="research" width="100%">
    <div class="accordion">
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div><a href="" title="Edit">Editati</a> | <a class="a_del" href="" title="Delete">Stergeti</a></div>
    </div>

それがあなたを正しい方向に動かすのに役立つかどうか教えてください. テーブルを使用することに完全に固執している場合は、機能する場合と機能しない場合がありますが、それらの Div をテーブルに変換して戻すことはできます... CSS や JS を変更する必要はありません。

于 2013-08-06T21:01:34.853 に答える