11

折りたたみメニューが表示されたとき（またはユーザーが折りたたみボタンをクリックしたとき）をキャッチする方法はありますか？

標準のブートストラップTwitterフレームワークとクラスを使用しています。

4

4 に答える 4

34

ブートストラップ3.xでは、探している4つのイベントは次のとおりです。

show.bs.collapse
shown.bs.collapse
hide.bs.collapse
hidden.bs.collapse

これらは、データターゲットのDOM要素で起動します。たとえば、次のマークアップの場合です。

<div role="navigation" class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Title</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li id="item1"><a href="#item1">Menu Item 1</a></li>
      </ul>
    </div>
  </div>
</div>

あなたは（jQueryで）聞くでしょう：

$('.navbar-collapse').on('shown.bs.collapse', function() { alert('shown'); });
$('.navbar-collapse').on('hidden.bs.collapse', function() { alert('hidden'); });
于 2014-01-25T17:25:54.203 に答える
9

「表示された」イベントハンドラーを使用します。

$("#accordion").on("shown",function(event){
        collapse_element = event.target;
    });

サポートされている他のイベントを確認するには、http： //twitter.github.com/bootstrap/javascript.html#collapseを参照してください。

于 2013-01-03T23:50:34.710 に答える
3

アイコンを変更してイージングアニメーションを使用する場合は、表示/非表示でこれを行う必要があります。

この例では、ブートストラップ2.3.2、jQuery 1.8.3、およびFontAwesome3.2.1を使用しています。

HTML：

<div id="accordion" class="accordion">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a data-item-id="{id}" href="#something" data-parent="#accordion"
         data-toggle="collapse" class="accordion-toggle">
       <i class="icon icon-expand-alt"></i> {title}</a>
     </div>
     <div data-item-id="{id}" class="accordion-body collapse" id="something">
       <div class="accordion-inner">
         {Content}
       </div>
     </div>
  </div>
 ... {additional panels}
</div>

js：

$('#accordion').on('show hide', function (e) {
  var oTarget = $(e.target);
  var oIcon = $('i', $('a[data-item-id="' + oTarget.attr('data-item-id') + '"]'));
  oIcon.toggleClass('icon-expand-alt icon-collapse-alt', 200);
 });
于 2013-11-18T23:57:13.697 に答える
2

TWITTER BOOTSTRAP 2

プラグインがアクティブな折りたたみグループにクラス「in」を追加しているようです。だから多分あなたはのようなことをすることができます。

if( $('#collapseOne').hasClass('in') ){
..do something
}

編集：

さて、私は今のところテストの方法がないので、これらは一種の推測です。これを行うことで、折りたたまれたリンクがいつクリックされたかを簡単に判断できると確信しています。

$('.accordion-toggle').click(function(){
   console.log('clicked');
});

ただし、どれがクリックされたかを正確に知りたい場合は、おそらくそれらにインデックスを付ける必要があります。

于 2012-05-17T18:53:36.540 に答える