Question

我正在使用引导程序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

您只需要访问单击元素的子元素，然后与类进行切换即可更改图标的视图。

JS：

request.POST['thing']

Answer 2

您不能有两个具有相同ID的元素。不要两次将相同的ID用于切换项。命名一个'ToggleElement1'和另一个'ToggleElement2'，它应该可以工作。

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>

Bootstrap和Javascript-卡图标未切换

3 个答案: