0

我有以下标记；

<tbody>
        <tr>
            <td class="expand">Showroom area - New Display Zone</td>
            <td>300</td>
            <td>350</td>
            <td class="shortfall">50</td>
        </tr>
        <tr class="hidden">
            <td>Core Display</td>
            <td>9</td>
            <td>10</td>
            <td>1</td>
        </tr>
        <tr class="hidden">
            <td>R8</td>
            <td>0</td>
            <td>0</td>
            <td>1</td>
        </tr>
        <tr class="hidden">
            <td>Highlight Car</td>
            <td>1</td>
            <td>1</td>
            <td>0</td>
        </tr>
        <tr>
            <td class="expand">Showroom - Handover Bay</td>
            <td>300</td>
            <td>350</td>
            <td class="shortfall">50</td>
        </tr>
        <tr class="hidden">
            <td>Core Display</td>
            <td>9</td>
            <td>10</td>
            <td>1</td>
        </tr>
        <tr class="hidden">
            <td>R8</td>
            <td>0</td>
            <td>0</td>
            <td>1</td>
        </tr>
        <tr class="hidden">
            <td>Highlight Car</td>
            <td>1</td>
            <td>1</td>
            <td>0</td>
        </tr>

和 jQuery：

$(function () {

    $('td.expand').click(function () {

        $(this).parents().siblings('tr.hidden').toggle();
        $(this).toggleClass("active");
    });
});

我希望此代码将前 3 个 tr.hidden 类切换为与第一个 td.expand 类直接相关，但运行代码会切换所有 tr.hidden 类以显示。

谁能看到我在这里做错了什么？

4

2 回答 2

3

基本上，你做错的不是告诉 jQuery 你只想处理一些元素tr.hidden。您还在parents几乎肯定想要parent（单数）的地方使用（复数）。

您可以使用nextUntil来收集元素，直到条件匹配。在这种情况下，您可以使用nextUntil来收集行，直到找到不是tr.hidden. 所以：

$(this).parent().nextUntil(':not(tr.hidden)').toggle();

实例| 资源

或者——这将是我的首选解决方案——你可能会考虑稍微改变你的结构，并使用多个tbody元素，一个用于每个展开/折叠组：

<tbody>
  <tr>
    <td class="expand">...</td>
    ...
  </tr>
  <tr class="hidden">
  ...
  </tr>
  ...
</tbody>
<tbody>
  <tr>
    <td class="expand">...</td>
    ...
  </tr>
  <tr class="hidden">
  ...
  </tr>
  ...
</tbody>

这大大简化了事情：

$(this).closest('tbody').find('tr.hidden').toggle();

实例| 资源

于 2012-05-18T12:42:29.903 回答
1

你想使用parent()而不是parents()

于 2012-05-18T12:41:21.307 回答