在Bootstrap面板上调用事件展开 [英] Call an event on Bootstrap panel expand

问题描述

我正在使用Bootstrap风格的手风琴（不是jQuery UI手风琴）。要求是在用户扩展手风琴时调用服务。这里是HTML：

 < div class =accordion-dashboard> 
< div class =panel-groupid =accordion> 
< div class =panel panel-default> 
< div class =panel-heading row-whitedata-toggle =collapsedata-parent =＃accordionhref =＃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分钟< / span>< / td> 
< / tr> 
< / table> 
< / div> 
< div id =runtimeValueclass =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>按< / td> 
< td>< img width =24pxsrc =images / company-logo.png>公司管理员< / td> 
< / tr> 
< tr> 
< td class =text-muted>开启< / td> 
< td class =text-muted> 2014年8月7日星期五，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。早午餐3狼月亮馅饼，sunt aliqua把一只鸟放在它上面鱿鱼单原产咖啡nulla assumenda shoreditch et。 Nihil anim keffiyeh helvetica，手工啤酒工人韦斯安德森先生荣誉称号。< / p> 
< / td> 
< / tr> 
< / table> 
< / div> 
< div class =col-lg-1 pull-right> 
< span data-toggle =collapsedata-parent =＃accordionhref =＃collapseOneclass =btn-close icon8>< / span> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

HREF 属性和相应的 id 属性将在运行时决定，我知道它们的模式。一种方法可能是在点击手风琴时绑定一个事件，但我希望将其作为最后的手段。

有什么其他方式可以调用服务用户点击并展开手风琴？

根据引导源（不可否认，对于最新版本3.3.0），应该有一个 shown.bs.collapse 事件在转换完成后发出。您可以勾选。

I am working on a flow where we are using Bootstrap styled accordion (NOT jQuery UI accordion). The requirement is to call a service when the user expands the accordion. Here's the 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 attribute and the correspoding id attributes will be decided at runtime and I am aware of the pattern of them. One approach could be binding an event on click of the accordion, but I want to have it as a last resort.

Is there any other way I can call a service when the user clicks and expands the accordion?

解决方案

According to the Bootstrap source (admittedly for the most current version, 3.3.0), there should be a shown.bs.collapse event emitted once the transition is complete. You can hook into that.

这篇关于在Bootstrap面板上调用事件展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！