12

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

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

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

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

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

    <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]
4

4 に答える 4

2

これで始められるはずです：http://jsfiddle.net/Xbg4n/45/

この例では .collapse を使用していませんが、.slideUp と .slideDown... だけを使用すると、collapse と簡単に交換できますが、例としては機能します。あなたが本当に得ているのは、あなたが主に求めていたターゲティングです。また、これに少し追加して、最初のコンテナーに戻りましたが、そこで停止しました。フォーカスをより適切に制御する必要があります (アンカー タグへのフォーカスを回避し、最初のコンテナーに戻るときにフォーカスを強制します)。

完全な 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;
}
于 2013-06-16T00:47:39.270 に答える
0

ブートストラップの折りたたみイベントを使用できます

show.bs.collapse

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

shown.bs.collapse

このイベントは、折りたたみ要素がユーザーに表示されると発生します (CSS トランジションが完了するのを待ちます)。

hide.bs.collapse

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

hidden.bs.collapse

このイベントは、折りたたみ要素がユーザーから隠されているときに発生します (CSS トランジションが完了するのを待ちます)。コピー

例：

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})
于 2019-08-20T01:23:48.597 に答える