jQuery 通过事件触发 Bootstrap .collapse('toggle')
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17126924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger a Bootstrap .collapse('toggle') via an event
提问by justSteve
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.
我有一个跨越几个开箱即用的 Bootstrap Collapse 窗格的表单。它们在单击鼠标时正确切换 - 现在我想实现一种方法，通过从当前打开的窗格的最后一个输入进行选项卡时触发的任何事件来打开关闭的窗格。
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');
IOW，当我逐步浏览打开窗格的输入字段时，我可以从一个输入切换到下一个输入 - 当我从最后一个输入切换时，焦点转到下一个窗格的后续标题区域。我希望跳转到该标题区域的行为触发.collapse('toggle')；
I've tried a few variations on:
我尝试了一些变体：
$('#collapseAcct').focus(function () {
$('#collapseAcct').collapse('toggle');
});
and have also tried climbing the family tree with :parentbut 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:
并且也试过攀爬家谱，:parent但没有找到钥匙。我的窗格的结构：我使用了 3 个窗格，其中唯一标识符是嵌套在 div 结构深处的一层 - 与 BS 的文档几乎相同。1 个窗格的 EG 结构：
<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]
采纳答案by Robert Waddell
This should get you started: http://jsfiddle.net/Xbg4n/45/
这应该让你开始：http: //jsfiddle.net/Xbg4n/45/
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).
该示例不使用 .collapse，而仅使用 .slideUp 和 .slideDown... 应该很容易与折叠换出，但适用于示例目的。您真正从中得到的是定位，我认为这就是您主要询问的内容。我还添加了一些内容以循环回到第一个容器，但停在那里。您应该更好地控制焦点（在循环回到第一个容器时，避免将焦点放在锚标记上并强制聚焦）。
You didn't provide full HTML sample code, so I filled in the blanks:
您没有提供完整的 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>
the JS:
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();
});
});
});
});
The CSS:
CSS：
#collapseAcct2 {
display:none;
}
#collapseAcct3 {
display:none;
}
回答by adeneo
What about doing it the other way around, and opening the next accordion when the last input in the current accordion blurs :
反过来做，并在当前手风琴中的最后一个输入模糊时打开下一个手风琴怎么样：
$('.accordion-inner input:last').on('blur', function() {
$('#collapseAcct').collapse('show');
});
And you did of course give all the elements unique ID's, and not all collapseAcct
你当然给了所有元素唯一的 ID，而不是全部 collapseAcct
回答by Abs
I had a situation where needed to make bootstrap panels behave like a form so open on focus or mouseover.
我有一种情况需要使引导面板表现得像一个在焦点或鼠标悬停时打开的表单。
I just triggered the click event.
我刚刚触发了点击事件。
code:
代码：
$('.panel-title a').bind('mouseover focus',function(){
$(this).trigger('click');
});
回答by Marcelo Austria
You can use bootstrap collapse events
您可以使用引导折叠事件
show.bs.collapse
This event fires immediately when the show instance method is called.
当调用 show 实例方法时立即触发此事件。
shown.bs.collapse
This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
当折叠元素对用户可见时会触发此事件（将等待 CSS 转换完成）。
hide.bs.collapse
This event is fired immediately when the hide method has been called.
调用隐藏方法时会立即触发此事件。
hidden.bs.collapse
This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). Copy
当折叠元素对用户隐藏时会触发此事件（将等待 CSS 转换完成）。复制
example:
例子：
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})
