时间戳

首页 > 解决方案 > Bootstrap & Javascript - 卡片图标没有切换

javascript - Bootstrap & Javascript - 卡片图标没有切换

问题描述

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

当我单击第一张卡打开时，切换可以工作，但对于第二张卡却没有。第二张卡有什么问题？

两张带有折叠元素的引导卡：

$(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>

标签： javascripthtmltwitter-bootstrap

解决方案

您只需要访问单击元素的子元素，然后使用类切换以更改图标的视图。

JS：

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

推荐阅读