jquery 通过 事件 触发 Bootstrap . collapse ( " 切换 " )

6fe3ivhb  于 2022-10-16  发布在  jQuery
关注(0)|答案(4)|浏览(171)

我有一个表单,它跨越了几个开箱即用的Bootstrap Collapse窗格。它们在鼠标点击时正确地切换--现在我想实现一种方法,通过从当前打开的窗格的最后一个输入跳格时触发的任何事件来打开一个关闭的窗格。
IOW,当我在打开的窗格的输入字段中移动时,我可以从一个输入跳到下一个输入--当我从最后一个输入跳到下一个窗格的标题区域时,我希望跳到该标题区域的动作触发.collapse('toggle');
我已经尝试了几个变化:

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

我也尝试过用:parent来爬家族树,但是没有找到关键字。我的窗格结构:我使用3个窗格,其中唯一标识符是div结构中的一层嵌套--与BS的文档几乎相同。例如,1个窗格的struc:

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

au9on6nz1#

如果反过来做,在当前折叠式面板中的最后一个输入模糊时打开下一个折叠式面板,会怎样:

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

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

oprakyz7

oprakyz72#

我有一个情况,需要使引导面板的行为像一个窗体,所以打开焦点或鼠标悬停。
我刚刚触发了click事件。
密码:

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

ep6jt1vc3#

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

f0brbegy4#

您可以使用bootstrap collapse events

show.bs.collapse

呼叫show instance方法时,会立即引发这个事件。

shown.bs.collapse

当折叠元素对用户可见时激发此事件(将等待CSS过渡完成)。

hide.bs.collapse

呼叫hide方法后,会立即引发这个事件。

hidden.bs.collapse

此事件在折叠元素对用户隐藏时触发(将等待CSS过渡完成)。Copy
例如:

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

相关问题