javascript - Bootstrap & Javascript - 卡片图标不切换

Question

我正在使用 bootstrap 4 构建一些显示/隐藏其内容的卡片。当卡片关闭时， anchor 图标为“fa-angle-down”，当单击该图标并打开卡片时，图标切换为“fa-angle-up”。

当我点击第一张卡片时，切换会起作用，但对于第二张卡片则不会。第二张卡有什么问题？

两张带有折叠元素的 Bootstrap 卡:

$(document).ready(function() {
  $("#ToggleElement").on("click", function() {
    $("#ToggleElement>i.fa-angle-down").toggleClass('fa-angle-up');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card text-left mb-3 mt-3">
  <div class="card-head p-3 d-flex justify-content-between">
    <h4>heading 1</h4>
    <a id="ToggleElement" class="" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
      <i class="fas fa-angle-down" style="font-size:32px;"></i>
    </a>

  </div>
  <div class="collapse" id="collapse1">
    <div class="card card-body">
      content ...
    </div>
  </div>
</div>

<div class="card text-left mb-3">
  <div class="card-head p-3 d-flex justify-content-between">
    <h4>heading 2</h4>
    <a id="ToggleElement" class="" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
      <i class="fa fa-angle-down" style="font-size:32px;"></i>
    </a>
  </div>
  <div class="collapse" id="collapse2">
    <div class="card card-body">
      Content ...
    </div>
  </div>
</div>

Answer 1

你只需要访问点击元素的子元素，然后切换类来改变图标的​​ View 。

JS:

$(document).ready(function () {
   $("a#ToggleElement").on("click", function () {
      $(this).children("i").toggleClass('fa-angle-up');
   });
});