Question

我正在尝试创建一个包含可以使用jQuery折叠和扩展的标题行的表。到目前为止，这是我的全部代码：

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr#cat1.header").click(function () { 
      $("tr#cat1.child").each(function() {
         $(this).slideToggle("fast");
      });
   });


});

</script>                                                               

</head>                                                                 
<body>                                                                  

<table>
    <tr id="cat1" class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr id="cat1" class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr id="cat1" class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
    <tr id="cat2" class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr id="cat2" class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>

</body>                                                                 
</html>

如果我是正确的，那么英文版的jQuery部分就是：“当点击ID为'cat1'的行和'header'类的行时，找到所有id为'cat1'的行，一类'孩子'，每个人都有一个slideToggle。“

然而，当我运行它并点击标题行时，没有任何反应。有什么见解吗？

编辑：在HTML表格中添加了第二个类别。对不起，我应该更具体一点。我希望能够单击特定类别的标题行，并且只有那些子行折叠，而不是页面上的所有子行。以这种方式，表的行为类似于“手风琴”，行按类别分组。

Answer 1

这将导致单击仅影响包含您单击的标题的表中的行，这意味着您可以将其更改为使用css类而不是复制id。

$("tr#cat1.header").click(function () { 
   $("tr#cat1.child", $(this).parent()).slideToggle("fast");
});

基本上this是单击的标题，我们将其包装在jQuery对象中并调用parent()（返回表），然后将其指定为新查询的上下文。 / p>

您的页面现在看起来像这样：

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr.header").click(function () { 
      $("tr.child", $(this).parent()).slideToggle("fast");
   });


});

</script>                                                               

</head>                                                                 
<body>                                                                  

<table>
    <tr class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
</table>

<table>
    <tr class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
</table>
</body>                                                                 
</html>

Answer 2

首先，您不应该有重复的行ID。对于页面上的每个元素，ID应该是唯一的。

此外，您不必使用each，因为jQuery会自动将slideToggle函数应用于选择器匹配的每个元素。我建议删除ID并改用类名：

$("tr.header").click(function () { 
   $("tr.child").slideToggle("fast");
});

如果您想确保只有某些表可以执行此切换功能，请在表上放置一个类并更新您的选择器：

<table class="collapsible">
    <tr>
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
---

$(".collapsible tr:first").click(function () { 
   $(this).nextAll().slideToggle("fast");
});

编辑回复：

罗里的回答是正确的，我只是在扩展它。如果使用多个表，则可以从行上的<tr>中删除CSS类，并将表简化为：

<table class="collapsible">
    <tr>
        <td>Cat1</td>
        <td>Cat1</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
    </tr>
</table>

<table class="collapsible">
    <tr>
        <td>Cat2</td>
        <td>Cat2</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
    </tr>
</table>

和jQuery下来：

$(".collapsible tr:first").click(function () {  
   $(this).nextAll().slideToggle("fast"); 
});

Answer 3

这是@Rory的answer扩展以处理多层次的层次结构，当我有数百行时，我更喜欢fadeToggle到slideToggle（至少在FF v24中）在你的表中，slideToggle什么都不做，然后所有的行突然消失 - 这让你想知道你是否真的点击了这一行。 fadeToggle立刻开始淡化行，让你知道正在发生的事情。

我使用直接父级的child代替id类，然后您可以递归地遍历每个分支。还有一个'折叠'类，我用它来修复当有一个已经折叠的子行时折叠父行的错误。

请参阅以下代码的JSFiddle：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">                                         
$(document).ready(function() {
    $('tr.header').click(function () { 
        toggleRowChildren($(this), 'header');
    });

    function toggleRowChildren(parentRowElement, parentClass) {
        var childClass = parentRowElement.attr('id');
        $('tr.'+childClass, parentRowElement.parent()).fadeToggle('fast');
        $('tr.'+childClass).each(function(){
            if ($(this).hasClass(parentClass) && !$(this).hasClass('collapsed')) {
                toggleRowChildren($(this), parentClass);
            }
        });
        parentRowElement.toggleClass('collapsed');
    }
});
</script>                                                               
</head>                                                                 
<body>                                                                  
<table class="table table-hover table-bordered">
    <tr id="cat1" class="header">
        <th>Cat1</th>
        <th>Row</th>
    </tr>
    <tr class="cat1">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr id="cat1a" class="header cat1">
        <th>Cat1a</th>
        <th>Row</th>
    </tr>
    <tr class="cat1a">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="cat1a">
        <td>data3</td>
        <td>data4</td>
    </tr>
    <tr id="cat2" class="header">
        <th>Cat2</th>
        <th>Row</th>
    </tr>
    <tr class="cat2">
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>
</body>                                                                 
</html>

Answer 4

不应该更像这样吗？我的意思是，这通常是整个文件。

   $("tr#cat1.header").click(function () { 
      $("tr#cat1.child").slideToggle("fast");
   });

jQuery中的可折叠表

4 个答案:

编辑回复：