Bootstrap 3切換切換按鈕文本和圖標開關

Question

我目前在bootstrap 3中建立了一個網站，該網站具有特定類型的摺疊/切換。我使用默認的引導程序js代碼。我有一個文本段落和一個按鈕。該按鈕用於切換摺疊。

我想要做的是將整個塊（包括段落）封裝在錨鏈接中，該錨鏈接將切換摺疊，無論用戶單擊按鈕還是文本段落。

我附上了current code I have in a jfiddle的jsfiddle來幫助解釋問題。

什麼我迄今所做的，是我添加以下的HTML代碼和崩潰切換，因爲它應該在我周圍的整個崩潰的錨鏈接：

<a href="#" data-toggle="collapse" data-target="#intro-text"> 

問題是包含文本和精靈圖像的按鈕（精靈和文本從「打開」改變爲「關閉」，反之亦然，取決於它是否被摺疊），並且在使用段落時不會觸發觸發崩潰。

我想要的是當點擊段落時觸發摺疊的按鈕來改變它的狀態。

我不確定這是CSS還是JavaScript問題（但傾向於js）。任何幫助將不勝感激。

Answer 1

我認爲你可以使用javascript和監聽崩潰事件，而不是使用html數據標籤來解決這個問題。這樣的事情應該做的伎倆：

JS

$('#starting-paragraph, .collapse-btn').click(function() { 
    $('#intro-text').collapse('toggle'); 
}); 

$('#intro-text').on('hidden.bs.collapse', function() { 
    $('.collapse-btn').addClass("collapsed"); 
}); 

$('#intro-text').on('shown.bs.collapse', function() { 
    $('.collapse-btn').removeClass("collapsed"); 
}); 

這裏有一個新的撥弄着它的工作：http://jsfiddle.net/o0pLgy6c/