CSS3過渡間歇地工作？

Question

我有一個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"); 
});

Answer 1

這是因為您將跨度（圖標）設置為切換按鈕，而不是按鈕。 除非您單擊跨度本身，否則不會進行切換。 這是一個用按鈕作為切換的jsfiddle 。 我敢肯定還有其他方法可以做到這一點。

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