Question

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

IOW，当我逐步通过打开窗格的输入字段时，我可以从一个输入到下一个输入 - 当我从最后一个输入中选择时，焦点将转到下一个窗格的后续标题区域。我希望标记到标题区域的行为可以触发.collapse('toggle');

我尝试了一些变体：

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

并尝试使用:parent攀爬家谱，但尚未找到关键字。 ~~我的窗格结构：~~我正在使用3个窗格，其中唯一标识符是div结构深层嵌套的一层 - 与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]

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

Answer 4

您可以使用引导崩溃事件

show.bs.collapse

调用show实例方法时，将立即触发此事件。

shown.bs.collapse

当使折叠元素对用户可见时将触发此事件（将等待CSS转换完成）。

hide.bs.collapse

调用hide方法后立即触发此事件。

hidden.bs.collapse

当隐藏元素对用户隐藏时将触发此事件（将等待CSS转换完成）。复制

示例：

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

通过事件触发Bootstrap .collapse（'toggle'）

4 个答案: