Bootstrap 3 Toggle 在切换时更改按钮文本和图标答案

【问题标题】：Bootstrap 3 Toggle Changing button text and icon on toggleBootstrap 3 Toggle 在切换时更改按钮文本和图标
【发布时间】：2014-12-17 13:50:46
【问题描述】：

我目前正在使用 bootstrap 3 构建一个具有特定类型的折叠/切换的网站。我正在使用默认的引导 js 代码。我有一个文本段落和一个按钮。该按钮用于切换折叠。

我想要做的是将整个块（包括段落）包装在一个锚链接中，无论用户单击按钮还是文本段落，该链接都会切换折叠。

我附上了 current code I have in a jfiddle 的 jsfiddle 来帮助解释问题。

到目前为止，我所做的是，我在 html 代码中添加了以下内容，并且当我在整个折叠周围的锚点上链接时，折叠切换应该是这样的：

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

问题在于包含文本和精灵图像的按钮（精灵和文本将状态从“打开”更改为“关闭”，反之亦然，具体取决于它是否折叠）并且这没有被触发当段落用于触发折叠时。

我想要的是在单击段落时触发折叠时更改其状态的按钮。

我不确定这是 css 还是 javascript 问题（但倾向于 js）。任何帮助将不胜感激。

【问题讨论】：

在段落点击时触发按钮动作。

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我认为您可以使用 javascript 并监听折叠事件，而不是使用 html 数据标签来解决此问题。像这样的东西应该可以解决问题：

$('#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/

【讨论】：