bootstrap-collapse.js隐藏和显示事件 [英] bootstrap-collapse.js hide and show events

问题描述

我遇到了boostrap-collapse.js show.bs.collapse和hide.bs.collapse事件的问题-第一次调用时这些事件不会触发（例如，页面加载-> on.show =事件未触发-> on.hide =事件未触发-> on.show =事件已触发）。在显示/取消隐藏元素后，这些事件将按预期触发。

I'm having a problem with boostrap-collapse.js show.bs.collapse and hide.bs.collapse events - those events do not fire up when invoked for the first time (e.g. page loads -> on.show = event is not fired -> on.hide = event is not fired -> on.show = event is fired) . After showing / un-hiding the element those events get fired up as intended.

<div class = "student" id = "stud1" onclick = "return expandTable(this,'stud1exp')">  
// header and stuff
</div>

<div class="panel-collapse collapse" id = "stud1exp">
// info that I want to show/hide 
</div>

JS

JS

function expandTable(self,invoke){
    $("#"+invoke).collapse('toggle');
    if (self.style.backgroundColor == "rgb(204, 238, 204)"){
      $("#"+invoke).on('hide.bs.collapse',function(){
          // do something when disabled...
      });
    }
    else{
      console.log("I am firing up here");
      $("#"+invoke).on('show.bs.collapse',function(){
        // do something when enabled
      });
    }
}

我尝试设置可扩展元素的默认状态

I have tried to set the default state of expandable elements with

$("#"+divs[i].id).collapse({toggle:false});

但这没什么用。有什么我想念的吗？欢呼！

but that didn't result in anything. Is there anything that I am missing? Cheers!

推荐答案

首先通过创建事件处理程序，然后调用 .collapse（'toggle'）进行修复。 事件：

Fixed by creating event handler first and then invoking a .collapse('toggle') event:

  $("#"+invoke).on('show.bs.collapse',function(){
    // do something when enabled
  });
  $("#"+invoke).collapse('toggle');

这篇关于bootstrap-collapse.js隐藏和显示事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！