CSS3过渡间歇性工作？答案

【问题标题】：CSS3 transition working intermittently?CSS3过渡间歇性工作？
【发布时间】：2015-12-02 12:59:47
【问题描述】：

我有一个 Bootstrap 表，每行的第一列都有一个按钮，其中的字体很棒。当您单击此按钮时，它会展开并将其下方的内容向下推，并显示隐藏的信息（引导手风琴）。我正在使用 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"); 
});

【问题讨论】：

标签： javascript jquery html twitter-bootstrap css

【解决方案1】：

这是因为您将跨度（图标）设置为切换，而不是按钮。除非您单击跨度本身，否则不会发生切换。这是一个jsfiddle，按钮是一个切换开关。我相信还有其他方法可以做到这一点。

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

【讨论】：