Javascript 引导折叠-如何根据折叠状态添加额外的单击行为

我有一个控制可折叠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
      }
    })

---

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

最好的方法是读取：）

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

调用show instance方法时，此事件立即激发

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

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

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

例如：

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

---

你能做的最好的事情就是读：）

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

调用show instance方法时，此事件立即激发

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

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

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

例如：

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

---

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

除了已折叠的

类之外，还可以使用：

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

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

您可以使用检查对象本身的状态：

collapse插件利用几个类来处理重载：

.collapse
隐藏内容

.collapse.in
显示内容

.collasing
在转换开始时添加，在转换结束时删除

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

除了已折叠的
类之外，还可以使用：

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

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

您可以使用检查对象本身的状态：

collapse插件利用几个类来处理重载：

.collapse
隐藏内容

.collapse.in
显示内容

.collasing
在转换开始时添加，在转换结束时删除

$（'#myCollapsible'）
这里是可折叠div吗？我希望功能附加到切换div折叠状态的按钮，而不是div。对不起，我不明白您在这里做什么。每次单击按钮时，我都会将“打开”行为添加到相关的div？问题——我使用的方法有什么问题吗？如果是，你能解释一下是什么吗？是的，每次点击按钮，
on
events在与此按钮相关的div上工作。试着用你的方法快速双击，你会发现问题所在。谢谢。我以div collapsed开始，但由于某种原因，它似乎不会在第一次扩展时触发show.bs.collapse，只会触发后续的次数。嗯，奇怪，你能显示你的代码吗？JSFiddle还是Codepen？
$（“#myCollapsible”）
这里是可折叠div吗？我希望功能附加到切换div折叠状态的按钮，而不是div。对不起，我不明白您在这里做什么。每次单击按钮时，我都会将“打开”行为添加到相关的div？问题——我使用的方法有什么问题吗？如果是，你能解释一下是什么吗？是的，每次点击按钮，
on
events在与此按钮相关的div上工作。试着用你的方法快速双击，你会发现问题所在。谢谢。我以div collapsed开始，但由于某种原因，它似乎不会在第一次扩展时触发show.bs.collapse，只会触发后续的次数。嗯，奇怪，你能显示你的代码吗？JSFIDLE还是Codepen？
$('#myCollapsible').on('hide.bs.collapse', function () {
  // do something…
});

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