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/