单击时更改 Font Awesome 图标，但单击下一个项目时 return 为原始图标

Question

我正在使用 Bootstrap 3 面板，并已将 Font Awesome Plus 和 Minus 图标附加到面板项目。我正在寻找一种使用 Jquery 将加号更改为减号 "onClick" 的方法，然后当单击另一个面板项目时 我希望减号图标变回加号 .

我一直在试验一些 Jquery 并且已经很接近了。我想我可能只是在这里遗漏了一些简单的东西。单击几下似乎工作正常，然后它开始混淆要切换回哪个 class。我的 HTML:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingFive">
        <h4 class="panel-title"><a class="collapsed faq-links" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"><i class="fa fa-plus-square-o fa-2x"></i>&nbsp;&nbsp;Panel Title 1</a></h4>
    </div>
    <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
        <div class="panel-body">
            <p>Panel body text</p>
        </div>
    </div>
</div>
<br />
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading13">
        <h4 class="panel-title"><a class="collapsed faq-links" data-toggle="collapse" data-parent="#accordion" href="#collapse13" aria-expanded="false" aria-controls="collapse13"><i class="fa fa-plus-square-o fa-2x"></i>&nbsp;&nbsp;Panel Title 2</a></h4>
    </div>
    <div id="collapse13" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading13">
        <div class="panel-body">
            <p>Panel body text 2</p>
        </div>
    </div>
</div>
<br />
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingFour">
        <h4 class="panel-title"><a class="collapsed faq-links" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><i class="fa fa-plus-square-o fa-2x"></i>&nbsp;&nbsp;Panel Title 3</a></h4>
    </div>
    <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
        <div class="panel-body">

    <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
        <div class="panel-body">
            <p>Panel body text 3</p>
        </div>
     </div>
   </div>
</div>

我的 Jquery 看起来像这样：

//TOGGLE FONT AWESOME ON CLICK
 $('.faq-links').click(function(){
 $(this).find('i').toggleClass('fa-plus-square-o fa-2x fa-minus-square-o fa-2x')
 });
 $('.faq-links').blur(function(){
 $(this).find('i').toggleClass('fa-plus-square-o fa-2x fa-minus-square-o fa-2x')
 });

如您所见，我在一个函数上使用点击，在下一个函数上使用模糊作为事件侦听器。我在这里做错了什么？我设置了 JSFIDDLE 来进一步解释我的问题。

在此先感谢您的帮助。

更新：Shivali Patel 的回答对我有用：

$('.faq-links').click(function(){
var collapsed=$(this).find('i').hasClass('fa-plus-square-o');

$('.faq-links').find('i').removeClass('fa-minus-square-o');

$('.faq-links').find('i').addClass('fa-plus-square-o');
if(collapsed)
$(this).find('i').toggleClass('fa-plus-square-o fa-2x fa-minus-square-o fa-2x')
});

他创建了一个基于 collapse 的变量，除了 toggleClass 事件之外，他还使用了 addClass 和 removeClass。干得好 Shivali。

Answer 1

发生这种情况是因为 blur event。
如果您在任何手风琴之外单击，仍然会调用模糊事件并更改相关手风琴的图标。

这里的例子：
http://jsfiddle.net/t7jtnupu/2/

单击时更改 Font Awesome 图标，但单击下一个项目时 return 为原始图标

Change Font Awesome Icon on Click, but return to original icon when next item is clicked

jquery

onclick

toggleclass

font-awesome

twitter-bootstrap-3

在此先感谢您的帮助。