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

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
      }
    })

这有效，但我想知道它是否强大。它假设我的点击函数在数据toggle更改类之前运行，我不确定是否合适。

Answer 1

您能做的最好的事情就是阅读引导文档：）

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

当调用显示实例方法时，此事件立即发射。

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

当使崩溃元素可见时，该事件被解雇 用户（将等待CSS过渡完成）。

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

当调用隐藏方法时，立即发射此事件。

$('#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添加到控制元素。＆lt; ...>插件将根据是否已打开或关闭可折叠元素自动切换此属性。

这两种方法都表示切换按钮的状态，但没有指示由按钮操作的对象的状态。当对象由几个按钮控制时，您需要查找其他符号。

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

Collapse插件使用几个类来处理繁重的工作：
.collapse隐藏了内容
.collapse.in显示内容
.collapsing在过渡开始时添加并完成后删除