使用jQuery扩展/折叠div

我试图通过单击<div>中的一些文本来展开和折叠<div>。现在的行为很奇怪。例如，如果我在<div>展开后单击文本... <div>将折叠，然后再次展开。另外，如果在展开后点击div内的某个地方，它会再次崩溃，我认为这是因为我正在触发动画，因为动画中的<div>在包装<div>内。这里的代码：使用jQuery扩展/折叠div

<!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>

任何想法？

来源

2010-06-09 Hristo

呀，使用event.stopPropagation();

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

这样一来，该事件不会打#loginBox。此外，如果你担心被陷在队列动画（点击次数过多动画会和去），你可以使用stop ..

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

进一步的切换 - 您implemation增加了一个点击处理程序在登录..切换的点击#loginBox是 click处理..

//登录框事件处理程序

$('#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();          
      } 
     );

更准确一点..

来源

2010-06-09 04:04:50

它似乎并不适合我。我只是尝试了event.stopPropagation（），当我单击文本时，该框永远不会展开。 – Hristo 2010-06-09 04:13:21

那么，进一步检查：你正在调用登录框上的切换 - 这是一个点击处理程序，但你想点击登录来触发。 – 2010-06-09 04:16:47

正确。所以......我不知道切换是一个点击处理程序。我将如何解决这个问题？ – Hristo 2010-06-09 04:17:55

使用jQuery扩展/折叠div

回答

相关问题