bootstrap-collapse.js隱藏和顯示事件

Question

我遇到了boostrap-collapse.js show.bs.collapse和hide.bs.collapse事件的問題 - 第一次調用時這些事件沒有啟動（例如頁面加載 - > on.show =事件不是fired - > 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')事件來.collapse('toggle') ：

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