Bootstrap 折叠 - 如何添加取决于折叠状态与否的额外点击行为答案

【问题标题】：Bootstrap collapse - how to add additional click behavior that depends on the state of collapse or notBootstrap 折叠 - 如何添加取决于折叠状态与否的额外点击行为
【发布时间】：2016-10-17 05:15:49
【问题描述】：

我有一个按钮来控制可折叠 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 函数在 data-toggle 更改类之前运行，我不确定是否适合这样假设。

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

你能做的最好的事情就是阅读Bootstrap documentation :)

您的解决方案不是最好的，因为如果您双击按钮的速度足够快，它将在 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

【讨论】：

$('#myCollapsible') 这里是可折叠的 div 吗？我希望将功能附加到切换 div 折叠状态的按钮，而不是 div。
对不起，我不明白你在这里做什么。每次单击按钮时，我都会将“on”行为添加到相关的div中吗？问题——我使用的方法有问题吗？如果是这样，你能解释一下它是什么吗？因为它有效，而且看起来比你在这里做的要简单得多。
是的，每次单击按钮时，on 事件都会在与此按钮相关的 div 上起作用。尝试用你的方法足够快地双击，你会发现问题。
谢谢。我从折叠的 div 开始，但由于某种原因，它似乎在第一次展开时并没有触发 show.bs.collapse，只有随后的时间。
嗯，奇怪，你能显示你的代码吗？ JSFiddle 还是 Codepen？

【解决方案2】：

您的解决方案最适合频繁发生的简单任务。

除了collapsed类，你还可以使用a special attribute：

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

这两个方法都指示切换按钮的状态，但不指示按钮操作的对象的状态。当一个物体被几个按钮控制时，你需要寻找其他迹象。

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

collapse 插件利用几个类来处理繁重的工作：
.collapse 隐藏内容
.collapse.in 显示内容
.collapsing 在过渡开始时添加，并在过渡结束时删除

【讨论】：