Bootstrap 和 Javascript - 卡片图标未切换

Question

我正在使用 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>

Answer 1

您不能有两个具有相同 id 的元素。 不要两次为您的切换项目使用相同的 id。 将一个命名为“ToggleElement1”，另一个命名为“ToggleElement2”，那么它应该可以工作。

Answer 2

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

JS：

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

Answer 3

每个id 值在文档中只能使用一次。 如果超过 一个元素被分配了相同的 ID，使用该 ID 的查询 只会选择 DOM 中第一个匹配的元素。 这种行为 然而，不应依赖；一份文件有多个 使用相同 ID 的元素无效。

$('[id=ToggleElement]').on('click', function() {
  $(this).find('i').toggleClass('fa-angle-down fa-angle-up');
});
// $('a#ToggleElement') alternate selector

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<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="fa 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>

单独使用 CSS

#ToggleElement .fa:before {
  content: "\f106";
}

#ToggleElement.collapsed .fa:before {
  content: "\f107";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<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="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
      <i class="fa fa-2x"></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="collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
      <i class="fa fa-2x"></i>
    </a>
  </div>
  <div class="collapse" id="collapse2">
    <div class="card card-body">
      Content ...
    </div>
  </div>
</div>