Переход CSS3 с перерывами?

Question

У меня есть таблица Bootstrap с кнопкой в ​​первом столбце каждой строки с шрифтом awesome down caret. Когда вы нажимаете эту кнопку, она расширяется и подталкивает содержимое ниже нее и предоставляет скрытую информацию (бутстрап-аккордеон). Я использую переход CSS, чтобы повернуть эту вниз каретку, чтобы вращаться и делать это так, чтобы пользователь знал, что они могут щелкнуть, чтобы отменить действие и скрыть содержимое.

Этот переход работает только некоторое время. Иногда он прячет значок сразу, иногда он вообще не вращается, а затем после нескольких щелчков других других неожиданно срабатывает при нажатии. Все на одной странице загружаются или обновляются. Он попадает или промахивается при каждом нажатии. Я не могу понять, что я делаю неправильно здесь, или если это просто ошибка, потому что у меня несколько на одной странице? (У меня несколько, потому что этот переход будет частью каждого результата на странице результатов поиска).

CSS-

.rotate{ 
    -moz-transition: all .3s linear; 
    -webkit-transition: all .3s linear; 
    transition: all .3s linear; 
} 

.rotate.down{ 
    -ms-transform:rotate(180deg); 
    -moz-transform:rotate(180deg); 
    -webkit-transform:rotate(180deg); 
    transform:rotate(180deg); 
} 

HTML-

<tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle"> 
<td class="ml10"> 
<button class="btn btn-primary btn-xs btn-block"><span class="fa fa-chevron-down rotate"></span></button> 
</td> 
<td>Content</td> 
<td><a href="#">Content</a></td> 
<td><a href="#">Content</a></td> 
<td><a href="#">Content</a></td> 
<td> Content</td> 
</tr> 

Jquery

$(".rotate").click(function(){ 
$(this).toggleClass("down"); 
}); 

Answer 1

Это потому, что вы настроили калибровочный (значок) в качестве переключателя, а не кнопка , Если вы не нажмете на сам диапазон, не будет переключаться. Вот jsfiddle с кнопкой в ​​качестве тумблера. Я уверен, что есть и другие способы сделать это.

$(".btn").on('click',function(){ 
$(this).children('.rotate').toggleClass("down"); 
});