Javascript 在 Bootstrap 面板上调用事件 expand
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26750590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call an event on Bootstrap panel expand
提问by Pramod Karandikar
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:
我正在处理我们使用 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>
HREFattribute and the correspoding idattributes 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.
HREF属性和对应的id属性将在运行时决定，我知道它们的模式。一种方法可能是在单击手风琴时绑定一个事件，但我想把它作为最后的手段。
Is there any other way I can call a service when the user clicks and expands the accordion?
当用户单击并展开手风琴时，还有其他方法可以调用服务吗？
回答by Rushee
You can use :-
您可以使用 ：-
$('#accordion').on('show.bs.collapse', function () {
//call a service here
});
回答by GregL
According to the Bootstrap source(admittedly for the most current version, 3.3.0), there should be a shown.bs.collapseevent emitted once the transition is complete. You can hook into that.
根据Bootstrap 源（不可否认，对于最新版本，3.3.0），shown.bs.collapse一旦转换完成，应该会发出一个事件。你可以钩进去。
回答by Vinita Rathore
You can check this for: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-accordion.php. This will help surely.
你可以检查这个：http: //www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-accordion.php。这肯定会有所帮助。
show.bs.collapse
This event fires immediately when the show instance method is called.
当调用 show 实例方法时立即触发此事件。
