Trigger ein Bootstrap .collapse ('toggle') über ein Ereignis

Question

Ich habe ein Formular, das mehrere sofort einsatzbereit Bootstrap Collapse-Bereiche umfasst. Sie lassen sich mit einem Mausklick korrekt umschalten - jetzt möchte ich eine Methode zum Öffnen eines geschlossenen Bereichs implementieren, indem Sie jedes Ereignis auslösen, wenn Sie von der letzten Eingabe des aktuell geöffneten Bereichs aus Tabstopps ausführen.

IOW, wenn ich durch die Eingabefelder des geöffneten Fensters gehe, kann ich von einer Eingabe zur nächsten wechseln - wenn ich von der letzten Eingabe aus gehe, geht der Fokus auf die nachfolgende Kopfzeile des nächsten Fensters. Ich hätte gerne die Aufgabe, in diese Kopfzeile zu tippen, um .collapse('toggle') zu feuern;

Ich habe ein paar Variationen anprobiert:

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

und haben auch versucht, mit :parent den Stammbaum klettern haben, aber nicht den Schlüssel gefunden. Struktur meiner Fenster: Ich verwende 3 Bereiche, in denen der eindeutige Bezeichner eine verschachtelte Ebene tief in der div-Struktur ist - so ziemlich wie in der Dokumentation von BS. Z.B. struk von 1 Scheibe:

<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

Einstieg: http://jsfiddle.net/Xbg4n/45/

Das Beispiel nicht .collapse nicht verwendet, b ut einfach .slideUp und .slideDown ... sollte leicht genug sein, um mit dem Kollaps zu tauschen, funktioniert aber zum Beispiel. Was Sie wirklich daraus machen, ist das Targeting, von dem Sie hauptsächlich wissen, wonach Sie gesucht haben. Ich fügte auch etwas hinzu, um zum ersten Container zurückzukehren, blieb dort aber stehen. Sie sollten eine bessere Kontrolle über den Fokus hinzufügen (vermeiden Sie den Fokus auf Anker-Tags und erzwingen Sie den Fokus, wenn Sie zum ersten Container zurückkehren).

Sie nicht vollständigen HTML-Beispielcode geliefert haben, so füllte ich in den freien Räumen:

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

die 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(); 
    }); 
}); 

});

Die CSS:

#collapseAcct2 { 
    display:none; 
} 
#collapseAcct3 { 
    display:none; 
} 

Answer 2

Was es umgekehrt, und das Öffnen des nächsten Akkordeon, wenn die letzte Eingabe in der aktuellen Akkordeon verwischt zu tun:

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

Und Sie haben natürlich alle geben die Elemente eindeutige ID, und alles Dies sollte Sie nicht collapseAcct

Answer 3

hatte ich eine Situation, wo erforderlich, um Bootstrap-Platten wie eine Form so offen Fokus oder Mouseover-Verhalten zu machen.

Ich habe gerade das Klickereignis ausgelöst.

Code:

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