在下拉按钮上添加动画到购物车箭头的问题

Question

您能否请一看这个演示，让我知道为什么我无法正确设置.fa类的动画？正如您所看到的，动画在单击每个按钮时工作正常，但不影响其他按钮。例如，如果您点击Action A然后点击Action B Action A上的箭头仍然处于之前的状态。

$(".dropper").on("click", function(){
 //$('.dropper').find('.fa').removeClass('css-chevron-down').addClass('css-chevron-right');
  $(this).find('.fa').toggleClass('css-chevron-right css-chevron-down');
});

.css-chevron-down{
  transform: rotate(0.25turn);
  transition: all 0.5s ease;
}
.css-chevron-right{
  transition: all 0.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="col-sm-12">
<div class="col-sm-6 "><div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action A <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div></div>
<div class="col-md-6" style="float:left; margin-left:200px;"><div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action B <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div></div>
</div>

Answer 1

当下拉菜单关闭时，您必须编写一些代码以使箭头处于其原始状态。您需要的事件是hide.bs.dropdown。下面这段代码可以解决这个问题：

<强>代码：

$("body").on("hide.bs.dropdown", function (e) {
  var i = $(e.relatedTarget).find(".fa");
  i.removeClass("css-chevron-down").addClass("css-chevron-right");
});

另外，请务必查看以下代码段，了解其实时工作原理。

<强>段：

＆＃13;

＆＃13;

/* ----- JavaScript ----- */
$(".dropper").on("click", function() {
  $(this).find('.fa').toggleClass('css-chevron-right css-chevron-down');
});

$("body").on("hide.bs.dropdown", function (e) {
  var i = $(e.relatedTarget).find(".fa");
  i.removeClass("css-chevron-down").addClass("css-chevron-right");
});

＆＃13;

/* ----- CSS ----- */
.css-chevron-down {
  transform: rotate(0.25turn);
  transition: all 0.5s ease;
}

.css-chevron-right {
  transition: all 0.5s ease;
}

＆＃13;

<!----- HTML ----->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-sm-12">
  <div class="col-sm-6 ">
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action A <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
  </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-md-6" style="float:left; margin-left:200px;">
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action B <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
  </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;