web-dev-qa-db-ja.com

クリックをシミュレートして開くBootstrap折りたたみ要素

ブートストラップの折りたたみ ヘッダーでクリックをシミュレートしようとしていますが、成功しません。

私が本当にやりたいのは、ユーザーがアコーディオンのヘッダーの近くにある画像をクリックすると、ユーザーがヘッダーの_<a>_をクリックした場合とまったく同じように開くことです。

ここに [〜＃〜]フィドル[〜＃〜] 理解を深めるために

私の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");
_

しかし、それは何もしません。


何か案が ？

javascriptjquerytwitter-bootstrapaccordioncollapse
12
AlexB

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

19
Rory McCrossan

要件を正しく取得した場合は、<img>タグ内に<a>を含めてみませんか？

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

this必要なものですか？

3
AyB