1

我有这个 HTML：

<table class="itemsTable table table-striped table-condensed table-hover">
    <thead>
    <tr>
        <th>#</th>
        <th>Location</th>
    </tr>
    </thead>
    <tbody>

    <tr class="collapse">
        <td class="center">1</td>
        <td>
            <a href="locations?location_id=1">Title 1</a>
        </td>
    </tr>

    <tr class="collapse">
        <td class="center">2</td>
        <td>
            <a href="locations?location_id=2">Title 2</a>
        </td>
    </tr>

    <tr class="collapse">
        <td class="center">3</td>
        <td>
            <a href="locations?location_id=3">Title 3</a>
        </td>
    </tr>

    </tbody>
</table>
<a href="#" class="collapseBtn">test</a>

和 jQuery：

$('.collapseBtn').on('click', function(e) {
    e.preventDefault(); 
    var $this = $(this);
    var $collapse = $this.closest('.itemsTable').find('.collapse');
    $collapse.collapse('toggle');
});

我希望行在链接点击时显示/隐藏行为。怎么了？

4

2 回答 2

2

$.closest 将查找匹配元素的 dom 树 - .itemsTable 不是父级.collapseBtn- 所以$this.closest('.itemsTable')不会匹配任何元素。

因此，要么将 放在.collapseBtn表中，要么使用$this.prev()代替$this.closest('.itemsTable').

$('.collapseBtn').closest('.itemsTable')您可以通过在控制台中运行来测试是否有匹配的元素

于 2013-09-18T17:24:30.180 回答
1

截至 130918_1100PST，所选答案不正确。尽管作者确实正确地确定了为什么closest()选择器不会返回任何要折叠的元素，但仅此一项并不能解决 OP 的问题。

此选择器也适用于选择要折叠的元素：

$('.collapse').methodgoeshere();

但元素不会展开/折叠——这不仅仅是所使用的选择器的问题。

正如用户 Chad 在 Benjaminbenben 的回答下方的 jsFiddle 中指出的那样，解决问题的关键实际上是使用了错误的方法。

这不起作用：

selector.collapse('toggle');

这做到了：

selector.toggle();

因此，正确答案是：

$('.collapseBtn').on('click', function() {
    $('.collapse').toggle();
});

jsFiddle here

于 2013-09-18T17:57:45.160 回答