Question

我有一个扩展的表格行，但有两件事我不确定

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<body>

<table>
  <tr class="parent" id="row123">
    <td>People</td>
    <td>Click to Expand</td>        
    <td>N/A</td>
  </tr>
  <tr class="child-row123">
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr class="child-row123">
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>
<script>
$(function() {
    $('tr.parent')
        .css("cursor","pointer")
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle();
        });
    $('tr[@class^=child-]').hide().children('td');
});
</script>
</body>
</html>

如何确保在开头折叠行
你好吗？当我尝试使用它时执行slideToggle效果我得到一些奇怪的结果。

谢谢，

Answer 1

您可以在切换操作上添加效果，例如“慢”。

对于初学者的崩溃，你可以选择tr的所有simbling：

$('tr.parent').siblings('[class^=child]').hide();

我做了一个工作的例子：这是a jsfiddle link

Answer 2

$(function() {
    $('tr[class^="child-"]').hide();
    $('tr.parent')
        .css("cursor","pointer")
        .click(function(){
            $('.child-'+$(this).attr("id"). slidetoggle();
        });
});

Answer 3

此

$('tr[@class^=child-]').hide().children('td');

应该是这样的：

$('tr[class^=child-]').children('td').hide();

注意删除的@。

对于slideToggle，使用div而不是table元素，这在动画中非常麻烦：

<td><div>People</div></td>

$('tr.parent')
    .css("cursor", "pointer")
    .click(function () {
    $(this).siblings().find('td > div').slideToggle();
});

$('tr[class^=child-]').children('td').children('div').hide();

<强> Demo

选择器会因多个子行而变得复杂一些：

$('tr.parent')
    .css("cursor", "pointer")
    .click(function () {
        // slide up divs in all sibling rows
        $(this).siblings('tr[class^=child-]').find('div').slideUp();

        // define children as all trailing, sequential rows with 'child-' class
        var $children = $(this).nextUntil( $('tr').not('[class^=child-]') );

        // toggle those
        $children.find('td > div').slideToggle();
});

// initially hide all child rows (could also be done with CSS)
$('tr[class^=child-]').find('td > div').hide();

<强> Demo 2

如何最初折叠可扩展表行

3 个答案: