jQuery Basculer et masquer ou afficher masquer est-il une meilleure méthode que celle-ci (jsfiddle inclus)

Dans une application sur laquelle je travaille, il utilise principalement jQuery toggle pour ouvrir et fermer les divs. Je sais que le même effet peut être fait en utilisant show and hide. J’ai un exemple dans ce jsfiddle . Est-ce que l’une ou l’autre méthode est meilleure que l’autre? Ou existe-t-il une autre méthode plus efficace et plus compatible pour ouvrir et fermer des divs ne permettant qu’à une personne d’être ouverte à la fois? Merci

De plus, je déplace mon application pour utiliser Twitter Bootstrap si c’est important

Toggle Method
Box One
Box Two
Show Hide Method
Box One
Box Two

Un séjour sans faille

Je suggère de supprimer le style et les actions de la partie HTML.

Et n’essayez pas de l’optimiser: il n’y a pas de problèmes de performances sur ces actions jQuery de base et la seule chose qui compte est la lisibilité du code: assurez-vous que votre HTML, CSS et Javascript sont évidents. N’essayez pas de créer du javascript trop intelligent: si vous ne pouvez pas voir instantanément ce qu’il fait, vous risquez des problèmes de maintenabilité. Et utilisez des identifiants, des classes et des atsortingbuts spécifiques au lieu de propriétés d’ordre qui ne suivront pas lorsque vous modifierez votre page.

Voici comment j’ai changé votre violon: http://jsfiddle.net/PRVm8/

HTML:

 
Toggle Method
One Two
Box One
Box Two
Show Hide Method
Box One
Box Two

Javascript:

 $('.button1[target="boxone"]').click(function(){ $('#boxtwo').hide(); $('#boxone').toggle(); }); $('.button1[target="boxtwo"]').click(function(){ $('#boxone').hide(); $('#boxtwo').toggle(); }); $('.button2').click(function(){ $('.box2').hide(); $('#show'+$(this).attr('target')).show(); }); 

Un séjour sans faille

jsFiddle demo

“… permettant une ouverture à la fois”

HTML:

 
Super method
Box One
Box Two
Super method
Box One
Box Two

CSS:

 .box{ display:none; } 

jQuery:

 $('.action-buttons').on('click','a',function(e){ e.preventDefault(); var $allbox = $(this).closest('.wrapper').find('.box'), $box = $allbox.eq( $(this).index() ), doIt= ($box.is(':visible')) ? $box.slideUp() : ($allbox.slideUp()) ($box.slideDown()); }); 

Je ne connais pas de meilleure méthode dans jQuery, mais une autre solution consiste à utiliser soit:

  • Accordéon jQuery UI
    ou
  • Onglets de l’interface utilisateur jQuery .