Question

我正在将手风琴效果融入表格中。

类“more”的表行是上表行的子代。单击该表行时，我希望“更多”tr切换。我如何仅定位那些表行而不是常规的“行”表行。

        <tr class="row first">
            <td>
                <span class="time">09.00&ndash;09.15</span>
                <h3>
                    Welcome and introduction</h3>
            </td>
            <td>
                person info</td>
        </tr>
        <tr class="row">
            <td>
                <span class="time">09.00&ndash;09.15</span>
                <h3>
                    Welcome and introduction</h3>
            </td>
            <td>
                person info</td>
        </tr>


        <tr class="more">
            <td>
                <h3>
                    hidden content</h3>
            </td>
            <td>
                person info</td>
        </tr>
        <tr class="more">
            <td>
                <h3>
                    hidden info</h3>
            </td>
            <td>
                person info</td>
        </tr>
            </div>

        <tr class="row">
            <td>
                <span class="time">09.00&ndash;09.15</span>
                <h3>
                    Welcome and introduction</h3>
            </td>
            <td>
                person info</td>
        </tr>
        <tr class="row break">
            <td>
                <h3>
                    10.50&ndash;11.20 Coffee break</h3>
            </td>
            <td>
                &nbsp;</td>
        </tr>

Answer 1

使用.nextUntil()和:not的组合。

$("table tr.row").each(function(){
  var $this = $(this);
  $this.click(function(){
    $this.nextUntil(":not(.more)").toggle();
  });
});

选择器:not(.more)匹配所有不包含more类名的元素。

See it here.

切换每个表行，直到到达具有X类的表行

1 个答案: