我正在尝试在 Bootstrap collapse 上模拟点击 header ,但没有成功。
我真正想做的是,当用户点击 Accordion 标题附近的图像时,它会打开,就像用户点击了 <a>
一样。标题。
这是一个FIDDLE为了更好地理解
我的 HTML 标记如下所示:
<div class="accordion" id="accordionFilter">
<div class="accordion-group">
<div class="accordion-heading">
<img src="http://placehold.it/40x40" onclick="SimulateClick();">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionFilter" href="#collapseOne">
Filter the results
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="row">
<br>
<div class="col-lg-3 col-md-3 col-sm-3">
1st column content
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
2nd column content
</div>
</div>
</div>
</div>
</div>
</div>
但我不知道如何在 SimulateClick()
中写“点击图片,打开 Accordion ” JS方法。
我试过类似的东西
$("#collapseOne").click();
或
$("#collapseOne").addClass("in");
但它什么也没做。
有什么想法吗?
最佳答案
您无需模拟点击,因为 bootstrap 公开了可用于以编程方式控制插件的方法。在这种情况下,有一个“切换”:
$('.accordion-heading img').click(function() {
$('#collapseOne').collapse('toggle');
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="accordion" id="accordionFilter">
<div class="accordion-group">
<div class="accordion-heading">
<img src="http://placehold.it/40x40">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionFilter" href="#collapseOne">
Filter the results
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
<div class="row">
<br>
<div class="col-lg-3 col-md-3 col-sm-3">
1st column content
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
2nd column content
</div>
</div>
</div>
</div>
</div>
</div>
有关 API 中可用方法的更多信息:http://getbootstrap.com/javascript/#collapse-usage
关于javascript - 模拟点击打开 Bootstrap 折叠元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24054621/