Trigger a Bootstrap .collapse ('toggle') przez zdarzenie

Question

Mam formularz, który obejmuje kilka gotowych okien rozwijania Bootstrap. Przełączają się poprawnie po kliknięciu myszą - teraz chciałbym zaimplementować sposób otwierania zamkniętego panelu za pomocą dowolnego zdarzenia uruchamianego podczas przechwytywania z ostatniego wejścia do aktualnie otwartego panelu.

IOW, jako że przechodzę przez pola wejściowe otwartego panelu Mogę zakładać od jednego wejścia do następnego - kiedy zakładka z ostatniego wejścia fokus przechodzi do następnego obszaru nagłówka następnego panelu. Chciałbym, aby akt tabulacji do tego regionu nagłówka został uruchomiony .collapse('toggle');

Próbowałem kilka wariacji na temat:

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

a także próbowali wspinaczki drzewo genealogiczne z :parent ale nie znalazłem klucza. Struktura moich tafli: Używam trzech paneli, w których unikalny identyfikator jest zagnieżdżony jedną warstwę głęboko w strukturze div - prawie tak samo, jak dokumentacja BS. NA PRZYKŁAD. struc 1 okienku:

<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

To powinno Ci zacząć: http://jsfiddle.net/Xbg4n/45/

Przykład nie używa .collapse, b ut po prostu .slideUp i .slideDown ... powinny być łatwe do wymieniania przy zwinięciu, ale działa na przykład. To, co tak naprawdę robisz, to cel, o którym myślę głównie pytasz. Dodałem też trochę do tego, aby wrócić do pierwszego kontenera, ale zatrzymałem się tam. Powinieneś dodać lepszą kontrolę nad ogniskiem (unikaj skupiania się na znacznikach kotwicznych i wymuszaj skupienie podczas powrotu do pierwszego pojemnika).

Nie zapewniają pełną przykładowy kod HTML, więc wypełnić puste pola:

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

Answer 2

co robi to na odwrót, i otwarcie następnego akordeonie podczas ostatniego wejścia w bieżącym akordeon zaciera:

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

I zrobiłeś oczywiście dać wszystko elementy unikatowy identyfikator, a nie wszystkie collapseAcct

Answer 3

miałem sytuacji gdzie potrzebne do paneli bootstrap zachowują się jak postaci tak otwartym na ostrości lub najechaniu myszą.

Właśnie wywołałem wydarzenie click.

Kod:

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