12

我有一个跨越几个开箱即用的 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]
4

4 回答 4

22

反过来做，当当前手风琴中的最后一个输入模糊时打开下一个手风琴：

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

当然，您确实为所有元素提供了唯一 ID，而不是全部collapseAcct

于 2013-06-15T19:04:18.467 回答
7

我有一种情况需要让引导面板表现得像一个在焦点或鼠标悬停时打开的表单。

我刚刚触发了点击事件。

代码：

$('.panel-title a').bind('mouseover focus',function(){
$(this).trigger('click');
});
于 2014-10-20T06:01:11.783 回答
2

这应该让你开始：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;
}
于 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 回答