Question

我有这个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');
});

我希望在链接点击时显示/隐藏行。有什么问题？

Answer 1

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

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

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

Answer 2

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

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

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

但元素不会扩展/崩溃 - 这不仅仅是使用选择器的问题。

解决问题的关键，正如用户Chad在他的jsFiddle中确认的benjaminbenben的答案，实际上是使用了错误的方法。

这不起作用：

selector.collapse('toggle');

这样做了：

selector.toggle();

因此，正确的答案是：

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

jsFiddle here

Bootstrap切换不起作用

2 个答案: