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 documentation：）

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

调用show instance方法时会立即触发此事件。

$('#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…
});

当从中隐藏折叠元素时会触发此事件 user（将等待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课程外，您还可以使用 a special attribute ：

请务必将aria-expanded添加到控件元素中。＆LT; ...＆GT;该插件将根据是否已打开或关闭可折叠元素自动切换此属性。

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

您可以使用 three other classes 来检查对象本身的状态：

崩溃插件使用几个类来处理繁重的工作：
.collapse隐藏内容
.collapse.in显示内容   转换开始时添加.collapsing，完成转移后删除{/ 1}}

引导程序崩溃 - 如何添加依赖于崩溃状态的其他单击行为

2 个答案:

CODEPEN