在Bootstrap面板上调用一个事件展开

Question

我正在开发一个流程,我们正在使用Bootstrap风格的手风琴(不是jQuery UI手风琴).要求是在用户扩展手风琴时调用服务.这是HTML:

<div class="accordion-dashboard">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading  row-white" data-toggle="collapse" data-parent="#accordion" href="#runtimeValue">                 
                <table>
                    <tr>
                        <td><span class="badge blue">A</span></td>
                        <td><strong>Aenean ultricies est lorem,id feugiat velit euismod ut.Nullam inia.Prasent vel nu Sed ante mauris, eu lacus..</strong></td>
                        <td><i class="icon8 icon-paperclip"></i></td>
                        <td><span class="time">5 mins</span></td>
                    </tr>                    
                </table>                        
            </div>
            <div id="runtimeValue" class="panel-collapse collapse ">
                <div class="panel-body">

                    <div class="row">
                        <div class="col-lg-9 col-lg-offset-1">
                            <table>
                                <tr>
                                    <td class="text-muted">By</td>
                                    <td><img width="24px" src="images/company-logo.png"> Company Admin</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">On</td>
                                    <td class="text-muted">Friday- 7 Aug 2014, 9.00PM</td>
                                </tr>
                                <tr>
                                    <td><i class="icon8 icon-paperclip"></i></td>
                                    <td>dummyfile.pdf</td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <h5>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</h5>
                                        <p>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.</p>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-lg-1 pull-right">
                            <span data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn-close icon8"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</div>

HREF属性和对应的id属性将在运行时决定,我知道它们的模式.一种方法可能是在点击手风琴时绑定一个事件,但我想把它作为最后的手段.

当用户点击并展开手风琴时,还有其他方法可以调用服务吗？

Answer 1

您可以使用 :-

$('#accordion').on('show.bs.collapse', function () {
       //call a service here 
});

Answer 2

根据Bootstrap源代码(不可否认最新版本,3.3.0),shown.bs.collapse转换完成后应该发生一个事件.你可以搞定.