jQuery Bootstrap 折叠，展开完成后回调

Bootstrap collapse, callback after expand is complete

提问by DasBeasto

I have a Bootstrap collapse panelin my webpage. I need to execute a function after the transition is complete and the panel has expanded fully. I have found this example for how to access the callback when the panel is collapsing and hidden.bs.collapseis added. How to trigger a JavaScript function after "Bootstrap: collapse plugin" transition is done.

我的网页中有一个 Bootstrap折叠面板。我需要在转换完成并且面板完全展开后执行一个函数。我找到了这个例子，用于在面板折叠和hidden.bs.collapse添加时如何访问回调。 如何在“引导：折叠插件”转换完成后触发 JavaScript 函数。

But using similar code I can't seem to trigger when the .collapse.inclass is applied.

但是使用类似的代码我似乎无法在.collapse.in应用类时触发。

$('#collapseExample').on('.collapse.in', function(){
    alert("hi");
 });

I also found this code using promises to trigger a function after a class is toggled. It is supposed to wait until all animations are complete. jquery function on toggleClass complete?This does not seem to work for my problem either.

我还发现这段代码使用 Promise 在类被切换后触发一个函数。它应该等到所有动画完成。toggleClass 上的 jquery 函数完成了吗？这似乎也不适用于我的问题。

So I ask: How do I trigger a function when the collapse function is done?

所以我问：我如何在折叠功能完成时触发一个功能？

This snippet attempts the jQuery promise technique. Ideally it would add the class .redafter the panel is done expanding but it triggers immediately. http://www.bootply.com/Vx9oeyYy03#

此代码段尝试使用 jQuery 承诺技术。理想情况下，它会.red在面板完成扩展后添加类，但它会立即触发。 http://www.bootply.com/Vx9oeyYy03#

$(document).on('click', '.btn', function(){
    $('#collapseExample').collapse("toggle").promise().done(function () {
         $('.well').addClass('red');
    })
});

回答by Arun P Johny

You can to use the shown event handlerwhich will be triggered after the animation is completed

您可以使用显示的事件处理程序，它将在动画完成后触发

$('#collapseExample').on('shown.bs.collapse', function() {
  console.log("shown");
}).on('show.bs.collapse', function() {
  console.log("show");
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>


<div id="collapseExample" class="panel-group" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>