expansion/effondrement div en utilisant jQuery

Je suis en train de développer et de réduire un <div> en cliquant sur du texte à l'intérieur du <div>. Le comportement en ce moment est très étrange. Par exemple, si je clique sur le texte après que le <div> est développé ... le <div> va se réduire puis se développer à nouveau. En outre, si je clique quelque part à l'intérieur du div après qu'il est développé, il se repliera à nouveau, et je pense que c'est parce que je déclenche l'animation puisque le <div> être animé est à l'intérieur du wrapper <div>. Voici le code:expansion/effondrement div en utilisant jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Insert title here</title> 

    <!-- Links --> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 

    <!-- Scripts --> 
    <script type="text/javascript" src="jQuery.js"></script> 
    <script> 

     // document script 
     $(function(){ 

      // login box event handler 
      $('#login').click(function() { 
       $('#loginBox').toggle(
        function() { 
         $('.loginBox').animate({ 
          height: '150px' 
         }, 
          '1000' 
         ); 
         $('#username').show(); 
         $('#password').hide(); 
         $('#placeHolder').show();     
        }, 
        function() { 
         $('.loginBox').animate({ 
          height: '50px' 
         }, 
          '1000' 
         ); 
         $('#username').hide(); 
         $('#password').hide(); 
         $('#placeHolder').hide();          
        } 
       ); 
      }); 


      // username field focus and blur event handlers 
      $('#username').focus(function() { 
       if($(this).hasClass('placeHolder')){ 
        $(this).val(''); 
        $(this).removeClass('placeHolder'); 
       } 
      }); 
      $('#username').blur(function() { 
       if($(this).val() == '') { 
        $(this).val('Username'); 
        $(this).addClass('placeHolder'); 
       } 
      });   

      // password field focus and blur event handlers 
      $('#placeHolder').focus(function() { 
       $(this).hide(); 
       $('#password').show(); 
       $('#password').focus(); 
       $('#password').removeClass('placeHolder'); 
      }); 
      $('#password').blur(function() { 
       if($(this).val() == '') { 
        $('#placeHolder').show(); 
        $(this).hide(); 
       } 
      }); 

     }); 

    </script> 

</head> 
<body> 

    <div id="loginBox" class="loginBox"> 
     <a id="login" class="login">Proceed to Login</a><br /> 
     <div> 
      <form> 
       <input type="text" id="username" class="placeHolder" value="Username" /> 
       <input type="password" id="password" class="placeHolder" value="" /> 
       <input type="text" id="placeHolder" class="placeHolder" value="Password" /> 
      </form> 
     </div> 
    </div> 

</body> 
</html>

Toutes les idées?

Source

2010-06-09 Hristo

Oui, utiliser event.stopPropagation();

$('#login').click(function(event) { 
     event.stopPropagation();

De cette façon, l'événement ne frappe pas #loginBox. En outre, si vous êtes inquiet au sujet des animations se coincer dans la file d'attente (en cliquant trop de fois et l'animation aller et aller), vous pouvez utiliser stop ..

$('#username').stop().show();

plus loin bascule - votre implemation ajoute un gestionnaire de clic pour #loginBox sur le clic de connexion .. bascule est un gestionnaire de clic ..

// événement boîte de connexion gestionnaire

$('#login').toggle(
      function() { 
       $('.loginBox').animate({ 
        height: '150px' 
       }, 
        '1000' 
       ); 
       $('#username').show(); 
       $('#password').hide(); 
       $('#placeHolder').show();     
      }, 
      function() { 
       $('.loginBox').animate({ 
        height: '50px' 
       }, 
        '1000' 
       ); 
       $('#username').hide(); 
       $('#password').hide(); 
       $('#placeHolder').hide();          
      } 
     );

est un peu plus précis ..

Source

2010-06-09 04:04:50

Cela ne semble pas fonctionner pour moi. J'ai juste essayé le event.stopPropagation() et la boîte ne se développe jamais quand je clique sur le texte. – Hristo

Eh bien, une inspection plus approfondie: vous appelez bascule sur le loginBox - c'est un gestionnaire de clic, mais vous voulez que le clic de connexion se déclenche .. –

Correct. Donc ... je ne savais pas toggle était un gestionnaire de clic. Comment pourrais-je résoudre ce problème? – Hristo

expansion/effondrement div en utilisant jQuery

Répondre

Questions connexes