Attiva un Bootstrap .collapse ('toggle') tramite un evento

Question

Ho un modulo che si estende su diversi riquadri Bootstrap Collapse pronti all'uso. Si spostano correttamente con un clic del mouse - ora vorrei implementare un modo per aprire un riquadro chiuso tramite qualunque evento si attiva quando si fa tabulazione dall'ultimo input del riquadro correntemente aperto.

IOW, mentre passo attraverso i campi di input del pannello aperto, posso passare da un input a quello successivo - quando I tab dall'ultimo input lo stato attivo passa alla successiva area di intestazione del riquadro successivo. Mi piacerebbe che l'atto di tabulazione nell'area di intestazione venisse attivato da .collapse('toggle');

Ho provato un paio di variazioni su:

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

e hanno anche provato salendo l'albero genealogico con :parent, ma non hanno trovato la chiave. Struttura dei miei riquadri: Sto usando 3 riquadri in cui l'identificatore univoco è uno strato annidato in profondità nella struttura div - più o meno lo stesso della documentazione di BS. PER ESEMPIO. struc di 1 riquadro:

<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

Questo dovrebbe iniziare: http://jsfiddle.net/Xbg4n/45/

L'esempio non usa .collapse, b ut just .slideUp e .slideDown ... dovrebbero essere abbastanza facili da essere scambiati con il collasso ma funzionano a scopi di esempio. Quello che stai veramente uscendo da questo è il targeting, che credo sia quello che stavi principalmente chiedendo. Ho anche aggiunto un po 'in questo per tornare al primo contenitore, ma mi sono fermato lì. È necessario aggiungere un controllo migliore sulla messa a fuoco (evitare di concentrarsi sui tag di ancoraggio e forzare la messa a fuoco quando si ritorna al primo contenitore).

Non hai fornito completo esempio di codice HTML, così ho riempito gli spazi vuoti:

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

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

});

Il CSS:

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

Answer 2

Che a farlo il contrario, e aprendo la prossima fisarmonica quando l'ultimo ingresso nella fisarmonica corrente offusca:

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

E si fece naturalmente dare a tutti gli elementi unici ID, e non tutti collapseAcct

Answer 3

ho avuto una situazione in cui aveva bisogno per rendere i pannelli bootstrap si comportano come un modulo in modo aperto su messa a fuoco o passaggio del mouse.

Ho appena attivato l'evento click.

codice:

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