Question

我的模板中有一个bootstrap手风琴，而且字体很棒，是fa-angle-double-right。如何在展开和折叠时切换它？在展开时更改为fa fa-angle-double-down，并在隐藏

上更改为fa fa-angle-double-right

这是我的模板：

<form action="." method="post">{% csrf_token %}
    {% include 'partials/form_field.html' with field=form.title %}
    {% include 'partials/form_field.html' with field=form.body %}
    {% include 'partials/form_field.html' with field=form.score %}

 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#respond"aria-expanded="true" aria-controls="respond">
          Click to respond to this review <span class="fa fa-angle-double-right"></span>
        </a>
      </h4>
    </div>
    <div id="respond" class="panel-collapse collapse {% if review.responder_name and review.response %}in{%endif %}" role="tabpanel" aria-labelledby="response">
      <div class="panel-body">
          {% include 'partials/form_field.html' with field=form.responder_name %}
          {% include 'partials/form_field.html' with field=form.response %}
      </div>
    </div>
  </div>
 </div>
 <a href="{% url 'backend_reviews' %}" class="btn btn-default">Cancel</a>
 <input type="submit" class="btn btn-primary" value="Update Review" />
 <a href="{% url 'backend_reviews_delete' review.pk %}" class="btn btn-warning pull-right">Delete Review</a>
 </form>

Answer 1

我们走了：

$(".fa-angle-double-right").click(function(){
    $(this).attr('class', 'fa fa-angle-double-down');
});

修改已更改的问题：

HTML

<span id="angle" class="fa fa-angle-double-right"></span>

使用JQuery的Javascript

$("#angle").click(function(){
    if($(this).attr('class') == "fa fa-angle-double-right"){
        $(this).attr('class', 'fa fa-angle-double-down');
    }
    else{
        $(this).attr('class', 'fa fa-angle-double-right');    
    }   
});

Answer 2

    var toggled = false;
    $('a[role="button"]').click(function(){
        if(toggled == false){
           $(this).find('span').addClass('fa fa-angle-double-down').removeClass('fa fa-angle-double-right');
           toggled = true;
        }else{
           $(this).find('span').addClass('fa fa-angle-double-right').removeClass('fa fa-angle-double-down');
           toggled  = false;
        }
    });

另一种方式可以......

$('a[role="button"]').click(function(){
$(this).find('span').toggleClass('fa-angle-double-down fa-angle-double-right');
});

如何使用jquery在bootstrap中切换字体 - 真棒图标？

2 个答案: