Question

我有一个Bootstrap表，每行的第一列有一个按钮，字体很棒。当您单击此按钮时，它会展开并向下推动其下方的内容并显示隐藏的信息（引导手风琴）。我正在使用CSS过渡来旋转这个向下的插入符号旋转并正面朝上制作，以便用户知道他们可以单击以反转操作并隐藏内容。

此转换仅在某些时候有效。有时它会立即旋转图标，有时它根本不会旋转，然后在点击其他图标后，另一个图标会在点击时突然发挥作用。所有在同一页面加载或刷新。每次点击都会受到影响。我似乎无法弄清楚我在这里做错了什么，或者它只是一个bug，因为我在同一页面上有多个？（我有多个，因为这个转换将成为搜索结果页面上每个结果的一部分。）

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"); 
});

CSS3过渡间歇性地工作？

1 个答案: