bascule fonction passe sur deuxième clic

Question

function toggleDiv() 
    { 
     $('#myDiv').toggle(function() 
     { 
      $('.pnlMyarea').slideDown(); 
      $('#separator').hide(); 
      $('#manualInsert').css('margin-top', '15px'); 
     }, 
     function() 
     { 
      $('.pnlMyarea').slideUp(); 
      $('#separator').show(); 
      $('#manualInsert').css('margin-top', '42px'); 
     }); 
    } 

J'utilise cette fonction pour basculer mon panneau mais cela se produit sur le deuxième clic pas sur le premier ce qui est l'erreur.

Answer 1

Commutez les deux fonctions autour

Answer 2

Essayez ceci;

$(document).ready(function() { 
    $('#myBtn').click()(function(){ 
    $('#myDiv').toggle(function() 
    { 
     $('.pnlMyarea').slideDown(); 
     $('#separator').hide(); 
     $('#manualInsert').css('margin-top', '15px'); 
    }, 
    function() 
    { 
     $('.pnlMyarea').slideUp(); 
     $('#separator').show(); 
     $('#manualInsert').css('margin-top', '42px'); 
    }); 
    }); 
}); 

Answer 3

Bien, il existe certaines incertitudes dans les fonctions de bascule. Pas par la conception ou la fonctionnalité, mais par la façon dont nous l'utilisons. J'ai moi-même fait face à ce problème plusieurs fois, comme si, si je mettais le gestionnaire de visibilité sur ahref click, et une autre action le cache/le montre par un autre événement comme ajax load, toggle ne le garderait pas, il le ferait faire ce qu'il est censé faire, c'est-à-dire action alternative à la précédente. En outre, vous devez maintenir la séquence des deux fonctions de basculement, vous-même.

Donc, pour les besoins de basculement tels que cacher/spectacle, j'ai foré une solution beaucoup plus évidente et contrôlée. Vérifiez le code. De cette façon, je peux montrer/cacher même par un autre événement et il sera suivi généralement par une classe showing. Utile à long terme et quand vous avez beaucoup de gestion des événements sur la page. Croyez-moi.

function toggleDiv(div) 
    { 
     if($(div).hasClass('showing')) 
     { 
      $('.pnlMyarea').slideUp(); 
      $('#separator').show(); 
      $('#manualInsert').css('margin-top', '42px');     
      $(div).removeClass('showing'); 
     } 
     else 
     {   
      $('.pnlMyarea').slideDown(); 
      $('#separator').hide(); 
      $('#manualInsert').css('margin-top', '15px'); 
      $(div).addClass('showing'); 
     } 
    } 

ou simplement

function toggleDiv() 
    { 
     if($('.pnlMyarea:visible').length > 0) 
     { 
      $('.pnlMyarea').slideUp(); 
      $('#separator').show(); 
      $('#manualInsert').css('margin-top', '42px');     
     } 
     else 
     {   
      $('.pnlMyarea').slideDown(); 
      $('#separator').hide(); 
      $('#manualInsert').css('margin-top', '15px'); 
     } 
    }