Déclencher un Bootstrap .collapse (‘bascule’) via un événement

J’ai un formulaire qui couvre plusieurs volets prêts à l’emploi Bootstrap Collapse. Ils basculent correctement d’un clic de souris – j’aimerais maintenant implémenter un moyen d’ouvrir un volet fermé via l’événement que tout se déclenche lors de la tabulation à partir de la dernière entrée du volet actuellement ouvert.

IOW, au fur et à mesure que je parcours les champs de saisie du volet ouvert, je peux passer d’une entrée à la suivante. Lorsque je fais défiler la dernière entrée, le focus passe à la région d’en-tête suivante du volet suivant. Je voudrais que l’acte de tabulation à cette région d’en-tête déclenche .collapse('toggle') ;

J’ai essayé quelques variantes sur:

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

et ont également essayé de grimper à l’arbre généalogique avec :parent mais n’ont pas trouvé la clé. ~~Structure de mes volets:~~ J’utilise 3 volets dont l’identificateur unique est un calque nested au plus profond de la structure div – à peu près la même chose que la documentation de BS. EG structure de 1 vitre:

    Account 
   content
[and everything wraps out accordingly]

Cela devrait vous aider à démarrer: http://jsfiddle.net/Xbg4n/45/

L’exemple n’utilise pas .collapse, mais juste .slideUp et .slideDown … devrait être assez facile à échanger avec collapse mais fonctionne à des fins d’exemple. Ce que vous en tirez vraiment, c’est le ciblage, et je pense que c’est ce que vous demandiez principalement. J’ai également ajouté un peu à cela pour revenir au premier conteneur, mais je me suis arrêté là. Vous devez mieux contrôler la mise au point (évitez de vous concentrer sur les balises d’ancrage et forcez la mise au point lorsque vous revenez au premier conteneur).

Vous n’avez pas fourni d’exemple complet de code HTML. J’ai donc rempli les blancs:

    Account 
       
 
 
 
   Settings 
       
 
 
 
   Prefs

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

});

Le CSS:

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

Qu’en est-il de faire l’inverse et d’ouvrir le prochain accordéon lorsque la dernière entrée de l’accordéon actuel s’estompe:

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

Et vous avez bien sûr donné à tous les éléments des identifiants uniques, et non pas tous collapseAcct

J’ai eu une situation où il était nécessaire de faire en sorte que les panneaux de démarrage se comportent comme un formulaire ouvert au survol ou à la

Je viens de déclencher l’événement click.

code:

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