Question

我的面板右侧有一些箭头。所以当我点击它们时，它们会被旋转。

$('.arrow').click(function() {
    $(this).css('transform', 'rotate(90deg)');
});

如果面板已关闭，我现在想将它们旋转回起点。

我的代码不是很先进，但这是我到目前为止所做的：https://jsfiddle.net/xvrccycm/

Answer 1

您不必使用JavaScript。您可以根据collapsed类更改转换。

.panel-heading .arrow {
  transform: rotate(90deg);
}
.panel-heading .collapsed .arrow {
  transform: rotate(0);
}

JSFIDDLE

Answer 2

JS：

$('.arrow').click(function() {
    $(this).toggleClass('turn');
});

的CSS：

.turn{
  -webkit-transform : rotate(90deg);
}

Answer 3

您可以尝试使用以下代码..

$('.arrow').click(function() {

    var _flag; 
    // storing previous state..
    if(!$(this).attr('rotated'))
        _flag = true;
    else
        _flag = false;

    $(".arrow").css('transform', 'rotate(0deg)').removeAttr('rotated'); // this will reset all other arrow..


   // Applying new state...
    if(_flag)
       $(this).attr('rotated',true).css('transform', 'rotate(90deg)');
});

Answer 4

保持开放状态并检查

var open = false;
$('.arrow').click(function() {
  open = !open;
  if(open)
        $(this).css('transform', 'rotate(90deg)');
  else
    $(this).css('transform', 'rotate(0deg)');
});

<强> JSFIDDLE

在面板关闭时动画回

4 个答案:

JSFIDDLE