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

Question

我正在使用Bootstrap 3面板並將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帕特爾的回答爲我工作：

$('.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') 
}); 

他創造了一個可變的基礎上崩潰和使用addClass與removeClass除了toggleClass事件。偉大的工作Shivali。

Answer 1

這是因爲blur event而發生的。
如果您在任何手風琴外單擊，仍然會調用模糊事件並更改相關手風琴的圖標。

這裏舉例：
http://jsfiddle.net/t7jtnupu/2/