Bootstrap崩溃-如何添加其他取决于崩溃状态的点击行为

Question

我有一个按钮来控制可折叠div的展开/折叠。 但我想在点击时添加其他功能，具体取决于div是在扩展还是在崩溃。 我写了这段代码：

    buttonElement.click(function() {
      if ($(this).hasClass("collapsed")) {
        // do the thing I want to do when expanding
      } else {
        // do the thing I want to do when collapsing
      }
    })

这可行，但是我想知道它是否健壮。 它假定我的click函数在数据切换更改类之前运行，并且我不确定是否合适。

Answer 1

最好的办法是阅读Bootstrap文档 :)

您的解决方案不是最好的，因为如果您足够快地双击按钮，它将在if语句和else语句中执行代码（仅折叠一次）

调用show实例方法时，将立即触发此事件。

$('#myCollapsible').on('show.bs.collapse', function () {
  // do something…
});

当折叠元素对用户可见时将触发此事件（将等待CSS转换完成）​​。

$('#myCollapsible').on('shown.bs.collapse', function () {
  // do something…
});

调用hide方法后，立即触发此事件。

$('#myCollapsible').on('hide.bs.collapse', function () {
  // do something…
});

当用户已隐藏折叠元素时将触发此事件（将等待CSS转换完成）​​。

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
});

例：

$('[data-toggle="collapse"]').click(function() {
  var collapsibleDiv = $(this).closest('.panel').find('.panel-collapse');
  collapsibleDiv.on('show.bs.collapse', function() {
    $('body').css('background', '#1abc9c');
  });
  collapsibleDiv.on('shown.bs.collapse', function() {
    $('body').css('background', '#e74c3c');
  });
  collapsibleDiv.on('hide.bs.collapse', function() {
    $('body').css('background', '#3498db');
  });
  collapsibleDiv.on('hidden.bs.collapse', function() {
    $('body').css('background', '#7f8c8d');
  });
});

CODEPEN

Answer 2

对于频繁发生的简单任务，您的解决方案是最好的。

除了collapsed类之外，您还可以使用特殊属性 ：

确保将aria-expanded添加到控件元素。 <...>插件将根据可折叠元素是否已打开或关闭来自动切换此属性。

这两种方法都指示切换按钮的状态，而不指示按钮所操作的对象的状态。 当一个对象由几个按钮控制时，您需要寻找其他标志。

您可以使用其他三个类来检查对象本身的状态：

折叠插件利用一些类来处理繁重的工作：
.collapse隐藏内容
.collapse.in显示内容
.collapsing在过渡开始时添加，在过渡完成时删除