通过事件触发Bootstrap .collapse('toggle')

Question

我有一个跨越几个开箱即用的Bootstrap Collapse窗格的表单.它们在鼠标单击时正确切换 - 现在我想实现一种方法,通过从当前打开的窗格的最后一个输入切换时发生的任何事件触发来打开一个关闭的窗格.

IOW,当我逐步通过打开窗格的输入字段时,我可以从一个输入到下一个输入 - 当我从最后一个输入中选择时,焦点将转到下一个窗格的后续标题区域.我希望能够向那个标题区域发起攻击.collapse('toggle');

我尝试了一些变化:

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

并且还尝试过攀登家谱,:parent但还没找到钥匙.我的窗格的结构:我使用3个窗格,其中唯一标识符是div结构深层嵌套的一层 - 与BS的文档几乎相同.EG窗格的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]

Answer 1

如果以相反的方式做到这一点,并在当前手风琴的最后一个输入模糊时打开下一个手风琴:

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

当然,你确实给了所有元素唯一的ID,而不是全部 collapseAcct

Answer 2

我有一种情况需要让自举面板表现得像焦点或鼠标悬停时那样开放.

我刚刚触发了点击事件.

码:

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

Answer 3

这应该可以帮助您开始：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;
}