單擊時更改字體真棒圖標，但單擊下一個項目時返回原始圖標

Question

我正在使用Bootstrap 3 Panel，並將Font Awesome Plus和Minus圖標添加到面板項目中。 我正在尋找一種方法，使用Jquery將加號更改為減去“onClick”，然后當單擊另一個面板項時， 我希望減去圖標更改回加號 。

我一直在嘗試一些Jquery並且已經接近了。 我想我可能會在這里錯過一些簡單的東西。 它似乎可以正常工作幾下，然后它開始混淆哪個類切換回來。 我的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/