javascript - bootstrap-collapse.js 隐藏和显示事件

Question

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

HTML

<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

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

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

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

但这并没有产生任何结果。有什么我想念的吗？干杯!

Answer 1

通过首先创建事件处理程序然后调用 .collapse('toggle') 来修复事件:

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