Bootstrap 折叠 - 如何添加取决于折叠状态的附加点击行为 [英] Bootstrap collapse - how to add additional click behavior that depends on the state of collapse or not

问题描述

我有一个按钮来控制可折叠 div 的展开/折叠.但是我想在单击时添加其他功能，这取决于 div 是展开还是折叠.我写了这段代码:

 buttonElement.click(function() {如果 ($(this).hasClass("collapsed")) {//做扩展时想做的事} 别的 {//折叠时做我想做的事}})

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

解决方案

你能做的最好的事情就是阅读 引导程序文档 :)

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

<块引用>

该事件在调用 show 实例方法时立即触发.

$('#myCollapsible').on('show.bs.collapse', function () {//做点什么…});

<块引用>

当折叠元素可见时触发此事件用户(将等待 CSS 转换完成)​​.

$('#myCollapsible').on('shown.bs.collapse', function () {//做点什么…});

<块引用>

调用隐藏方法时立即触发此事件.

$('#myCollapsible').on('hide.bs.collapse', function () {//做点什么…});

<块引用>

当折叠元素被隐藏时触发此事件用户(将等待 CSS 转换完成)​​.

$('#myCollapsible').on('hidden.bs.collapse', function () {//做点什么…});

示例:

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

I have a button that controls the expansion/collapse of a collapsible div. But I want to add additional functionality on click that depends on whether the div is expanding or collapsing. I wrote this code:

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

This works, but I'm wondering if it's robust. It assumes that my click function runs before the data-toggle changes the class, and I'm not sure if it's appropriate to assume this.

解决方案

The best thing you can do is read Bootstrap documentation :)

Your solution is not the best, because if you double click on your button fast enough it will execute code inside your if statement AND in else statement (with collapsing only once)

This event fires immediately when the show instance method is called.

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

This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).

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

This event is fired immediately when the hide method has been called.

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

This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

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

Example:

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

这篇关于Bootstrap 折叠 - 如何添加取决于折叠状态的附加点击行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！