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

Question

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

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

我在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/