расширение/свертывание div с помощью jQuery

Я пытаюсь развернуть и свернуть <div>, щелкнув текст внутри <div>. Поведение сейчас очень странное. Например, если я щелкну текст после того, как <div> расширится... <div> свернется, а затем снова расширится. Кроме того, если я щелкну где-нибудь внутри div после того, как он развернут, он снова рухнет, и я думаю, что это потому, что я запускаю анимацию, поскольку анимируемый <div> находится внутри оболочки <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>

Любые идеи?


animation html jquery collapse expand
person Hristo    schedule 09.06.2010    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Да, используйте event.stopPropagation();

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

таким образом, событие не попадает в #loginBox. Кроме того, если вы беспокоитесь о том, что анимация застрянет в очереди (слишком много кликов и анимация будет продолжаться и продолжаться), вы можете использовать стоп..

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

далее при переключении - ваша реализация добавляет обработчик кликов в #loginBox при щелчке входа в систему.. toggle является обработчиком кликов..

// обработчик событий окна входа

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

как-то точнее..

person Dan Heberden    schedule 09.06.2010
comment
Кажется, это не работает для меня. Я только что попробовал event.stopPropagation(), и поле никогда не расширяется, когда я нажимаю на текст. - person Hristo; 09.06.2010
comment
Что ж, дальнейшая проверка: вы вызываете переключатель для входа в систему - это обработчик кликов, но вы хотите, чтобы щелчок входа в систему срабатывал. - person Dan Heberden; 09.06.2010
comment
Правильный. Итак... я не знал, что toggle - это обработчик кликов. Как мне это исправить? - person Hristo; 09.06.2010
comment
Добавив переключатель к элементу, для которого вы хотите чередовать щелчки (#login).. или просто сделайте обычный щелчок и проверьте высоту div... - person Dan Heberden; 09.06.2010
comment
аааа :) Спасибо! Я просто не знал, что toggle - это обработчик кликов... Я начал возиться с jQuery... сегодня :) - person Hristo; 09.06.2010