javascript - 添加和更改类

Question

我正在尝试让字体很棒的图标在点击时发生变化。

我有一个 FAQ 页面，其中包含当用户点击问题时会触发下拉菜单的问题。我已经用 jQuery 完成了这个，但现在我试图让箭头在问题后变为向上或向下。

我目前有这个 jQuery 代码，但它只隐藏当前图标而没有用新图标替换它。我看到图标向左滑出，但我需要它立即改变而不滑入和滑出。

Javascript:

$(this).find($(".fa")).toggle(function(){
  $(this).find($(".fa")).removeClass('fa-sort-desc');
  $(this).find($(".fa")).addClass('fa-sort');
});

HTML:

<div class="vraag vraag4 col-md-12" style="">
  <p class="faq1 col-md-11">Van wie krijg ik de factuur?</p>
  <div class="fa fa-sort-desc col-md-1 pijlomlaag pijlomlaag4"></div>
</div>

<div class="vragenopen vraag4open">
  <span class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span>
</div>

Answer 1

你应该在 click 上做 toggle 类而不是 toggleClass() 你可以使用下面的代码来切换 fa-sort -desc => fa-sort 类。

var s = true;
$('#arrow').click(function() {
  if (s == true) {
    s = false;
    $(this).find('i').removeClass('fa-caret-down').addClass('fa-caret-up');
  } else {
    s = true;
    $(this).find('i').removeClass('fa-caret-up').addClass('fa-caret-down');
  }
});

#arrow {
  font-size: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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">

<a id="arrow"><i class="fa fa-caret-down"></i></a>