aufklappen/Zuklappen div mit jQuery

Ich versuche auf-und Zuklappen ein <div> indem Sie etwas text in den <div>. Das Verhalten ist jetzt sehr seltsam. Zum Beispiel, wenn ich auf den text nach der <div> erweitert wird... die <div> wird zusammenbrechen und erweitern Sie dann wieder. Auch, wenn ich Sie irgendwo in der div nach erweitert, es wird wieder zusammenbricht, und ich denke, das ist weil ich bin das auslösen der animation da die <div> animiert ist innerhalb der wrapper <div>. Hier ist der code:

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

Irgendwelche Ideen?

InformationsquelleAutor Hristo | 2010-06-09

  1. 1

    Yeah, verwenden Sie event.stopPropagation();

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

    so, das Ereignis wird nicht getroffen #loginBox. Auch, wenn Sie besorgt sind über die Animationen immer in der Warteschlange hängen (zu viele Male anklicken und die animation läuft und läuft), die Sie verwenden können, stoppen .. 

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

    weiter toggle - Ihre implemation fügt einen click-handler für #loginBox auf die klicken Sie auf login.. Umschalten ist einen click-Ereignishandler..

    //login-box event-handler

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

    ist ein bisschen mehr genau..

    Es scheint nicht zu funktionieren für mich. Ich habe gerade versucht das Ereignis.stopPropagation() und die box nie erweitert wird, wenn ich auf den text klicken.
    Nun, eine weitere Untersuchung: Sie telefonieren Umschalten auf die loginBox - das ist ein click-handler, aber Sie wollen die klicken Sie auf login, um das Feuer..
    Richtig. Also... ich wusste nicht, Umschalten war einen click-Ereignishandler. Wie würde ich dieses Problem beheben?
    Durch hinzufügen wechseln Sie zu dem element, das Sie möchten alternativen Klicks (#login).. oder einfach eine regelmäßige klicken Sie auf und überprüfen Sie die Höhe der div...
    ahhh 🙂 Danke! Ich wusste nur nicht Umschalten, wurde eine click-handler... ich begann messing mit jQuery... heute 🙂

    InformationsquelleAutor Dan Heberden

Schreibe einen Kommentar