Coulissante & amp; masquer plusieurs panneaux dans jQuery

Question

J'ai une table avec plusieurs lignes dans chaque ligne. C'est une liste de sélection. Selon la sélection (lorsque l'événement onchange est déclenché), des panneaux apparaissent contenant des données supplémentaires sous la ligne.J'ai actuellement un code comme celui-ci:

 var allPnls = '.inv-dtl-comnts-add,.inv-dtl-comnts-update';
    $(document).ready(function(){
    hideAll();

    //select action change
    $(".inv-dtl-ddlaction").change(onSelectChange);

    $(".btn-cancel").click(function(event){
        slideAll();
        $(".inv-dtl-ddlaction").val('[Select an Action]');
        return false;
    });

});

    function onSelectChange(event){

    //find out which select item was clicked
    switch($(this).val())
    {
        case 'View/Add Comment':
            $(this).closest(".row").children(allPnls).slideUp("fast",
                function(){
                    $(this).closest(".row").children(".inv-dtl-comnts-add").slideToggle("fast");
            });
            break;
        case 'Change Status':
            $(this).closest(".row").children(allPnls).slideUp("fast",
                function(){
                    $(this).closest(".row").children(".inv-dtl-comnts-update").slideToggle("fast");
            });
            break;
        default:
            //code to be executed if n is different from case 1 and 2
    }

 }

 function hideAll(){
    $(allPnls).hide();
 }
 function slideAll(){
    $(allPnls).slideUp("fast");
 }

Donc, je cache tous les panneaux lorsque la page est chargée et si un panneau est déjà ouvert, je veux le fermer avant de rouvrir le nouveau panneau. Cela fonctionne avec la publication. Avec un seul panneau dans la sélection, cela fonctionnait très bien, mais avec deux panneaux, le glissement se produit deux fois (il semble glisser vers le bas des panneaux non ouverts avant de les faire remonter). Comment puis-je régler cela afin que tous les panneaux listés dans la variable allPnls se ferment SEULEMENT s'ils sont déjà ouverts? Existe-t-il un meilleur moyen de fermer les panneaux, puis d’avoir un rappel pour faire fonctionner le slideToggle?

Lloyd

Answer 1

Vous pouvez uniquement fermer les panneaux visibles ou ouverts en ajoutant le signe: visible dans le sélecteur, comme suit:

var allPnls = '.inv-dtl-comnts-add:visible,.inv-dtl-comnts-update:visible';

Je ne sais pas si cela résoudrait votre problème. Peut-être que si vous fournissiez un exemple de page représentant ce problème, je pourrais vous aider.