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

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

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

我尝试了一些变化：

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

并尝试攀爬家谱:parent但没有找到钥匙。 我的窗格结构：我正在使用3个窗格，其中唯一标识符是div结构深层嵌套的一层 – 与BS的文档几乎相同。 EG窗格的1个窗格：

  
 
 Account 
 
 
 
content
[and everything wraps out accordingly] 

Answer 1

这应该可以帮到你： http ： //jsfiddle.net/Xbg4n/45/

该示例不使用.collapse，但只是.slideUp和.slideDown …应该很容易与崩溃交换出来但是可以用于示例目的。 你真正摆脱的是目标，我认为这是你主要询问的。 我还添加了一点来循环回到第一个容器，但在那里停了下来。 您应该更好地控制焦点（避免关注锚标记并在循环回第一个容器时强制对焦）。

您没有提供完整的HTML示例代码，因此我填写了空白：

 
 
 
 Account 
 
 
 
    
 
 
 
 
 
 Settings 
 
 
 
    
 
 
 
 
 
 Prefs 
 
 
 
    
 
 
  

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 2

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

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

你当然给了所有元素唯一的ID，而不是所有的collapseAcct

Answer 3

我有一种情况需要使引导板的行为像焦点或鼠标hover时那样开放。

我刚刚触发了点击事件。

码：

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