Glisser et masquer plusieurs panneaux dans jQuery

Question

J'ai un tableau avec plusieurs lignes dans chaque ligne est une liste de sélection et basé sur la sélection (lorsque l'événement onchange est déclenché) panneaux apparaissent contenant des données supplémentaires ci-dessous la ligne.J'ai actuellement le code comme ceci:

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

Je me cache tous les panneaux lorsque la page se charge et si un groupe spécial est déjà ouvert je veux le faire glisser fermé avant de rouvrir le nouveau panneau. Cela fonctionne avec la publication. Avec un seul panneau dans la sélection, cela a bien fonctionné, mais avec deux panneaux, le glissement se produit deux fois (il semble glisser vers le bas des panneaux non ouverts avant de les faire glisser à nouveau). Comment puis-je ajuster ceci afin que je puisse faire glisser tous les panneaux listés dans la variable allPnls SEULEMENT s'ils sont déjà ouverts? Y a-t-il une meilleure façon de faire glisser les panneaux et de rappeler le slideToggle?

Lloyd

Answer 1

Vous pouvez fermer uniquement des panneaux visibles ou ouverts en ajoutant le: visible dans le sélecteur comme ci-dessous:

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

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