Question

我目前正在bootstrap 3中构建一个具有特定类型的崩溃/切换的网站。我正在使用默认的bootstrap 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/

Bootstrap 3切换切换时更改按钮文本和图标

1 个答案: