javascript - CSS3 转换间歇性工作？

Question

我有一个 Bootstrap 表格，每行的第一列都有一个按钮，带有很棒的向下插入符号字体。当您单击此按钮时，它会展开并将其下方的内容向下推并显示隐藏信息( Bootstrap Accordion )。我正在使用 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"); 
});