CSS3转换间歇性工作？

Question

我有在各行的与字体真棒向下插入符的第一列的按钮引导表。当你点击这个按钮时，它会展开并将其下面的内容压下，并显示隐藏的信息（引导手风琴）。我正在使用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"); 
});