如何在自舉中爲手風琴添加加號或減號？當手風琴關閉時顯示加，減去手風琴開啓時的減號

Question

我試圖給自舉手風琴加上加號和減號，這表明當顯示內容的div在打開和關閉時顯示內容，當我打開第二個標籤時它應該關閉打開的其他標籤（目前正在發生）的內容，並且它應該將活動標籤以外的標籤的減號圖標更改爲加號圖標。

任何人都可以與解決方案或方法來非常感謝:)。

enter code here 
<h2>Accordion Example</h2> 
    <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> 
<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading panel-heading-custom"> 
    <h4 class="panel-title panel-title-custom"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
    </h4> 
    </div> 
    <div id="collapse1" class="panel-collapse collapse in"> 
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
    </div> 
</div> 
<div class="panel panel-default"> 
    <div class="panel-heading panel-heading-custom"> 
    <h4 class="panel-title panel-title-custom"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
    </h4> 
    </div> 
    <div id="collapse2" class="panel-collapse collapse"> 
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
    </div> 
</div> 
<div class="panel panel-default"> 
    <div class="panel-heading panel-heading-custom"> 
    <h4 class="panel-title panel-title-custom"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> 
    </h4> 
    </div> 
    <div id="collapse3" class="panel-collapse collapse"> 
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
    </div> 
</div> 

jquery code 

<script> 

$(document).ready(function() { 
$('.panel-title-custom').addClass('glyphicon glyphicon-plus'); 

$('.panel-title-custom').click(function(){ 
    $(this).toggleClass('glyphicon-plus glyphicon-minus'); 

    }); 

}); 

</script> 

Answer 1

在這裏你去工作代碼。

$('#accordion') 
    .on('show.bs.collapse', function(e) { 
    $(e.target).prev('.panel-heading-custom').find('div').removeClass('glyphicon glyphicon-plus');   
    $(e.target).prev('.panel-heading-custom').find('div').addClass('glyphicon glyphicon-minus'); 
    }) 
    .on('hide.bs.collapse', function(e) { 
    $(e.target).prev('.panel-heading-custom').find('div').removeClass('glyphicon glyphicon-minus'); 
    $(e.target).prev('.panel-heading-custom').find('div').addClass('glyphicon glyphicon-plus'); 
    }); 

檢查下面的jsfiddle

JSFIDDLE