通过事件触发Bootstrap .collapse('toggle') [英] Trigger a Bootstrap .collapse('toggle') via an event

问题描述

我有一个跨多个现成的Bootstrap折叠窗格的表单.它们可以通过鼠标单击正确切换-现在，我想实现一种通过在从当前打开的窗格的最后一个输入中进行制表时触发的任何事件来打开关闭的窗格的方法.

I have a form that spans several out-of-the-box Bootstrap Collapse panes. They toggle correctly on a mouse click - now I'd like to implement a way to open a closed pane via whatever event fires when tabbing from the last input of the currently open pane.

IOW，当我进入打开的窗格的输入字段时，我可以从一个输入切换到下一个输入-当我从最后一个输入切换到选项卡时，焦点将移至下一个窗格的后续标题区域.我想跳到标题区域以触发.collapse('toggle');

IOW, as I step thru the input fields of the open pane I can tab from one input to the next - when I tab from the last input the focus goes to the subsequent header region of the next pane. I'd like the act of tabbing to that header region to fire .collapse('toggle');

我尝试了以下几种变化:

I've tried a few variations on:

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

，也曾尝试使用:parent攀登家谱，但没有找到钥匙. 我的窗格的结构:我正在使用3个窗格，其中唯一标识符是div结构中嵌套的一层深层-与BS的文档几乎相同.例如. 1个窗格的结构:

and have also tried climbing the family tree with :parent but haven't found the key. Structure of my panes:I'm using 3 panes where the unique identifier is a nested one layer deep in the div structure - pretty much the same as BS's documentation. E.G. struc of 1 pane:

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

推荐答案

这应该使您入门: http://jsfiddle.net/Xbg4n/45/

该示例不使用.collapse，而是.slideUp和.slideDown ...应该足够容易替换为折叠，但可以用于示例目的.您真正从中得到的是定位，我认为这是您主要要问的问题.我还添加了一些内容以循环回到第一个容器，但在此停了下来.您应该更好地控制焦点(避免将焦点放在锚定标记上，并在循环回到第一个容器时强制聚焦).

The example doesn't use .collapse, but just .slideUp and .slideDown... should be easy enough to swap out with collapse but works for example purposes. What you are really getting out of this is the targeting, which I think is what you were mainly asking about. I also added a bit into this to cycle back to the first container, but stopped there. You should add better control over focus (avoid focus on anchor tags and force focus when cycling back to first container).

您没有提供完整的HTML示例代码，所以我填写了空白:

You didn't provide full HTML sample code, so I filled in the blanks:

<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;
}

这篇关于通过事件触发Bootstrap .collapse('toggle')的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！