Question

我正试图在点击时更改字体真棒图标。

我有一个常见问题解答页面，其中包含的问题会在用户点击问题时触发下拉菜单。我用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

您应该toggle上的click课程，但toggleClass()不能fa-sort-desc，您可以使用以下代码来切换fa-sort =＆gt; 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>

int main()
{
    int a = -2, b;
    do {
        (a>0) ? b = a : (b = -a);
        return b;
    } while(0);
    printf("a=%d b=%d\n", a, b);
}

添加和更改类

1 个答案: