我正在开发一个流程,我们使用 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
属性将在运行时决定,我知道它们的模式。一种方法可能是在单击手风琴时绑定事件,但我想将其作为最后的手段。
当用户单击并展开手风琴时,还有其他方法可以调用服务吗?
您可以使用:-
$('#accordion').on('show.bs.collapse', function () {
//call a service here
});
根据 Bootstrap 源(诚然,对于最新版本,3.3.0),一旦转换完成,应该会发出
shown.bs.collapse
事件。你可以加入其中。
编辑(2024 年 7 月):该事件仍然存在于源中。您可以在此处看到它发出并且在上面定义了几行,具有相同的名称,因此该事件应该仍然可以安全使用。
您可以查看:http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-accordion.php。这肯定会有帮助。
show.bs.collapse
当调用 show 实例方法时,此事件立即触发。
您可以使用此代码触发该函数并获取打开的手风琴的相应 id。
jQuery(document).on('show.bs.collapse','#your-accordion',function (e){
var clicked = $(document).find("[href='#" + $(e.target).attr('id') + "']");
// Your awesome code
});