Bootstrap переключатель не работает

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

$ .closest будет искать дерево dom для соответствующего элемента - .itemsTable не является родителем .collapseBtn - поэтому $this.closest('.itemsTable') не будет соответствовать никаким элементам.

Итак, положите .collapseBtn в таблицу или используйте $this.prev() вместо $this.closest('.itemsTable').

Вы можете проверить, если имеются соответствующие элементы, запустив $('.collapseBtn').closest('.itemsTable') в консоли

Answer 2

На 130918_1100PST выбранный ответ не является правильным. Хотя писатель правильно определил, почему селектор closest() не вернет какие-либо элементы, чтобы свернуть, это само по себе не устранило проблему OP.

Этот селектор будет также работы для выбора элементов разрушаться:

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

но элементы не будут разворачивать/сворачивать - это не просто вопрос селектора используется.

Ключ к решению проблемы, так как пользователь Чад определил в своем jsFiddle ниже ответ benjaminbenben, на самом деле был использован неправильный метод.

Это не сработало:

selector.collapse('toggle'); 

Это сделал:

selector.toggle(); 

Таким образом, правильный ответ был:

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

jsFiddle here