web-dev-qa-db-ja.com

イベントを介してBootstrap .collapse（ 'toggle'）をトリガーします

すぐに使えるフォームがいくつかありますBootstrapペインを折りたたみます。それらはマウスのクリックで正しく切り替わります-今、閉じたペインを開く方法を実装したいと思います現在開いているペインの最後の入力からタブ移動すると発生するイベント。

IOW、開いているペインの入力フィールドをステップ実行すると、ある入力から次の入力にタブで移動できます。最後の入力からタブに移動すると、フォーカスは次のペインの後続のヘッダー領域に移動します。そのヘッダー領域にタブ移動して.collapse('toggle')を起動したいのですが。

私はいくつかのバリエーションを試しました：

    $('#collapseAcct').focus(function () {
        $('#collapseAcct').collapse('toggle');
    });

また、:parentで家系図を登ろうとしましたが、キーが見つかりませんでした。 私のペインの構造：私は3つのペインを使用していますが、一意の識別子はdiv構造の深くネストされた1つのレイヤーです-BSのドキュメントとほとんど同じです。例えば。 1ペインの構造：

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Account</a>            
        </div>
        <div id="collapseAcct" class="accordion-body collapse">
            <div class="accordion-inner">
            <div>content</div>[and everything wraps out accordingly]
jquerytwitter-bootstrapcollapse
8
justSteve

これはあなたを始めるはずです： http://jsfiddle.net/Xbg4n/45/

この例では.collapseを使用していませんが、.slideUpと.slideDown ...は簡単に折りたたみと入れ替えることができますが、例としては機能します。あなたが本当にこれから得ているのはターゲティングであり、それはあなたが主に尋ねていたものだと私は思います。また、最初のコンテナにサイクルバックするためにこれに少し追加しましたが、そこで停止しました。フォーカスの制御を強化する必要があります（アンカータグにフォーカスを避け、最初のコンテナに戻るときにフォーカスを強制する）。

あなたは完全なHTMLサンプルコードを提供しなかったので、私は空白を埋めました：

<form id="myform">
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Account</a> 
    </div>
    <div id="collapseAcct1" class="accordion-body collapse">
        <div class="accordion-inner">
            <div>
                <input type="text" name="input1" />
                <input type="text" name="input11" />
                <input type="text" name="input12" />
            </div>
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Settings</a> 
    </div>
    <div id="collapseAcct3" class="accordion-body collapse">
        <div class="accordion-inner">
            <div>
                <input type="text" name="input3" />
                <input type="text" name="input31" />
                <input type="text" name="input32" />
            </div>
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Prefs</a> 
    </div>
    <div id="collapseAcct2" class="accordion-body collapse">
        <div class="accordion-inner">
            <div>
                <input type="text" name="input2" />
                <input type="text" name="input21" />
                <input type="text" name="input22" />
            </div>
        </div>
    </div>
</div>

jS：

$('.accordion-group').each(function(){
var topcontainer = $(this);
topcontainer.find('input:last').each(function(){
    $(this).blur(function(){
        //swap slideup and slidedown for 'collapse' as appropriate
        var nextag = topcontainer.next('.accordion-group');
        var lastag = $('.accordion-group').last();
        if(topcontainer.is(lastag)){
            var nextag = $('.accordion-group').first();
        }
        var showag = nextag.find('.collapse');
        var hideag = topcontainer.find('.collapse');
        showag.slideDown();
        hideag.slideUp();
    });
});

}）;

CSS：

#collapseAcct2 {
    display:none;
}
#collapseAcct3 {
    display:none;
}
2
Robert Waddell

それを逆にして、現在のアコーディオンの最後の入力がぼやけたときに次のアコーディオンを開くのはどうですか？

$('.accordion-inner input:last').on('blur', function() {
    $('#collapseAcct').collapse('show');
});

そしてもちろん、すべての要素に一意のIDを与えるのではなく、collapseAcct

15
adeneo

bootstrapパネルをフォームのように動作させ、フォーカスまたはマウスオーバーで開くようにする必要がある状況にありました。

クリックイベントをトリガーしました。

コード：

$('.panel-title a').bind('mouseover focus',function(){
$(this).trigger('click');
});
6
Abs

bootstrap折りたたみイベントを使用できます

show.bs.collapse

このイベントは、show instanceメソッドが呼び出されるとすぐに発生します。

shown.bs.collapse

このイベントは、折りたたみ要素がユーザーに表示されると発生します（CSSの移行が完了するまで待機します）。

hide.bs.collapse

このイベントは、hideメソッドが呼び出されるとすぐに発生します。

hidden.bs.collapse

このイベントは、折りたたみ要素がユーザーから非表示になったときに発生します（CSSの移行が完了するまで待機します）。コピーする

例：

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})
0
Marcelo Austria