Question

我创建了一个切换按钮，并在其中放置了一个箭头，但是我希望单击按钮时箭头会改变。我使用的字体棒极了，所以只需单击一下即可将fa-chevron-right更改为fa-chevron-down。

我尝试了这个，但是没有用。

 <button class="btn btn-warning btn-receita offset-lg-2" id="btn-receitamob" data-clicked-times="0"> CLIQUE AQUI PARA VER A RECEITA <span id="span-circle"> <i class="fas fa-chevron-right" id="seta"></i> </span>                      </button>

<div id="receita-div" style="display: none;" class="receita-hidden">
--content




<script> 
    $( "#btn-receitamob" ).click(function() {
        $("#receita-div").slideToggle(1500);
    });
</script> 
<script>
    $("#btn-receitamob").click(function() {
        $('.fa-chevron-right').removeClass(".fa-chevron-right").addClass(".fa-chevron-down"); //Adds 'a', removes 'b'

    }, function() {
        $('.fa-chevron-right').removeClass(".fa-chevron-down").addClass(".fa-chevron-right"); //Adds 'b', removes 'a'

    });
</script>

Answer 1

我建议的是开设一个普通的班级，并在其上下班级之间切换。如下所示：

例如，我将icon类添加到具有fa-cheveron-right元素的元素中。然后，我将如下所示访问它：

<script> 
    $( "#btn-receitamob" ).click(function() {
        $("#receita-div").slideToggle(1500);
        $(this).find(".icon").toggleClass('fa-cheveron-right fa-chevron-down');
    });
</script>

Answer 2

正如Gururasad Rao所说，删除类名“ fa-chaveron-down”和“ fa-chaveron-right”上的点

Answer 3

您的.slideToggle(1500)表示：幻灯片动画运行1秒半。因此，您需要在完整的回调中运行切换类。

您的第二次单击事件处理程序无法正常工作，因为它已附加到将在切换时消失的类上。

$( "#btn-receitamob" ).click(function() {
  $("#receita-div").slideToggle(1500, function () {
      // 
      //  if you want to toogle at the eend of animation
      //
      //$("#btn-receitamob i").toggleClass("fa-chevron-right fa-chevron-down");
  });
  
  //
  // if you want to toogle the icon right in time
  //
  $(this).find("i").toggleClass("fa-chevron-right fa-chevron-down");
});

<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.2.1/css/bootstrap.min.css"">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">


<button class="btn btn-warning btn-receita offset-lg-2" id="btn-receitamob" data-clicked-times="0"> CLIQUE AQUI PARA VER
    A RECEITA <span id="span-circle"> <i class="fas fa-chevron-right" id="seta"></i> </span></button>

<div id="receita-div" style="display: none;" class="receita-hidden">
    --content
</div>

点击功能更改图标

3 个答案: