1

我已经被这个问题困扰了一段时间了。我知道要使表格行顺利动画，您需要divs. 我遇到了这个解决方案，我可以隐藏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>

查询：

$('.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 回答