用于表行的滑动切换

slideToggle for a table row

本文关键字：用于      更新时间：2023-09-26

根据这篇文章，滑动效果现在可以很好地用于表格。我试图找出一种方法来实现slideToggle功能到下面的代码。

下面的代码可以正确地删除/显示指定的内容，但它不能与幻灯片运动一起做。

位于上述职位的jsfiddle通过在td中放置div来解决他们的情况，所以对于我的情况，我试图在<tr>中放置div来解决我的情况，但它不起作用。

$(".one").on('click', function() {
    $(this).nextAll('.two:first').slideToggle(); 
}); 
.one{
    background: orange;
    cursor: pointer;
}
.two{
    background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="one">
        <td> Hello </td>
    </tr>
     <tr>
        <td> world </td>
    </tr>
    <tr class="two">
        <td> Foo <br> foo </td>
    </tr>
    <tr class="two">
        <td> Bazz </td>
    </tr>
    <tr class="one">
        <td> Hello </td>
    </tr>
    <tr class="two">
        <td> Bar<br>bar </td>
    </tr>
</table>

您需要将td元素中的内容包装到div中，然后您可以:

$(this).nextAll('.two:first').find('div').slideToggle();

我不知道您是否会在代码中添加更多列，但我建议您使用<只有当你想要显示的信息需要它时，才使用Table>

例如，在你张贴在这里的代码，你可以(应该)嵌套它只是使用<</em> and margin: 0 auto;

类似:

<div class="one"> Hello </div>
<div class="one"> world </div>
<div class="two"> Foo <br> foo </div>
etc...

如果你需要使用表格，那么@ sarahburt发布的链接可能是你最好的选择。

相关文章：