使用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

回答

相關問題