1

私はしばらくこの問題に悩まされてきました。テーブルの行をスムーズにアニメーション化するには、 s が必要であることを知っていますdiv。そして、私がtablerow望むものを隠すことができるこの解決策を見つけましたが、再び表示させることはできません。

if ソリューションまたはトグル ソリューションが必要です。

HTML:

<table>
    <tbody>
        <tr>
            <td class="clickme">
                Sample text
            </td>
            <td class="clickme">$10</td>
            <td class="clickme">$100</td>
            <td class="clickme">$0</td>
        </tr>
        <tr class="hideme">
            <td colspan="4">
                <div>
                    Sample text, sample text, sample text, sample text, sample text, sample text
                </div>
            </td>
        </tr>
        <tr>
            <td class="clickme">
                Sample text
            </td>
            <td class="clickme">$10</td>
            <td class="clickme">$100</td>
            <td class="clickme">$0</td>
        </tr>
        <tr class="hideme">
            <td colspan="4">
                <div>
                    Sample text, sample text, sample text, sample text, sample text, sample text
                </div>
            </td>
        </tr>
        <tr>
            <td class="clickme">
                Sample text
            </td>
            <td class="clickme">$10</td>
            <td class="clickme">$100</td>
            <td class="clickme">$0</td>
        </tr>
        <tr class="hideme">
            <td colspan="4">
                <div>
                    Sample text, sample text, sample text, sample text, sample text, sample text
                </div>
            </td>
        </tr>
        <tr>
            <td class="clickme">
                Sample text
            </td>
            <td class="clickme">$10</td>
            <td class="clickme">$100</td>
            <td class="clickme">$0</td>
        </tr>
        <tr class="hideme">
            <td colspan="4">
                <div>
                    Sample text, sample text, sample text, sample text, sample text, sample text
                </div>
            </td>
        </tr>
    </tbody>
</table>

Jクエリ:

$('.hideme').find('div').hide();
$('.clickme').click(function() {
    $(this).parent().next('.hideme').find('div').slideToggle(500);
    return false;        
});

正しいマークアップと Jquery が更新されました。最終的な JSFiddle: http://jsfiddle.net/NVx4S/21/

4

2 に答える 2

3 
<table>
    <tbody>
        <tr>
            <td id="content-1" class="clickme">
                Sample text
                <!-- <a href="#content-1" class="clickme">Sample text</a> -->
            </td>
            <td>$10</td>
            <td>$100</td>
            <td>$0</td>
        </tr>
        <tr>
           <td colspan="4">
               <div id="slide-content-1">
                  Sample text, sample text, sample text, sample text, sample text, sample text
               </div>
           </td>
        </tr>
    </tbody>
</table>​

    $('.clickme').click(function() {
        //$(this.hash).slideToggle(500);
        $('#slide-'+this.id).slideToggle(500);
        return false;        
    });
于 2012-08-10T17:58:41.020 に答える
0

あなたの JSFiddle を少し編集しました。それはあなたを助けますか？

http://jsfiddle.net/NVx4S/7/

于 2012-08-09T13:38:58.517 に答える