模拟点击打开 Bootstrap 折叠元素

Posted 2023-03-24

【中文标题】模拟点击打开 Bootstrap 折叠元素

【英文标题】：Simulate a click to open Bootstrap collapse element

【发布时间】：2014-07-26 02:49:35

【问题描述】：

我正在尝试在 Bootstrap collapse 标头上模拟单击，但没有成功。

我真正想做的是，当用户单击手风琴标题附近的图像时，它会像用户单击标题的 <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() JS 方法中写“点击图片，打开手风琴”。

我尝试过类似的东西

$("#collapseOne").click();

或

$("#collapseOne").addClass("in");

但它什么也没做。

有什么想法吗？

【参考方案1】：

您不需要模拟点击，因为引导程序公开了可用于以编程方式控制插件的方法。在这种情况下，有一个“切换”：

$('.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

【讨论】：

对不起，我没有看到这个选项...谢谢！仅供参考，如果其他人稍后阅读这篇文章并且在调用collapse 方法时有Uncaught TypeError: undefined is not a function：使用$.noConflict()，似乎.collapse 被其他JS 库使用

别忘了还有$('selector').collapse('show')和$('selector').collapse('hide')

【参考方案2】：

如果我正确地理解了您的要求，为什么不在<a> 标签中包含<img>？

<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionFilter" href="#collapseOne">
      <img src="http://placehold.it/40x40">
       Filter the results
</a>

this是您需要的吗？

【讨论】：

这可能会更容易，但这并不是我想要的。不过，谢谢你的想法！