使用 jQuery 展开/折叠 div答案

【问题标题】：expanding/collapsing div using jQuery使用 jQuery 展开/折叠 div
【发布时间】：2011-03-01 11:42:18
【问题描述】：

我正在尝试通过单击<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>

有什么想法吗？

【问题讨论】：

标签： jquery animation html expand collapse

【解决方案1】：

是的，使用event.stopPropagation();

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

这样，事件不会命中#loginBox。另外，如果您担心动画卡在队列中（点击次数过多，动画会不断出现），您可以使用stop..

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

进一步切换 - 您的实现在单击登录时向#loginBox 添加一个单击处理程序。切换是一个单击处理程序..

// 登录框事件处理程序

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

更准确一点..

【讨论】：

这似乎对我不起作用。我刚刚尝试了 event.stopPropagation()，当我单击文本时，框永远不会展开。
好吧，进一步检查：您在 loginBox 上调用切换 - 这是一个点击处理程序，但您希望点击登录触发..
正确。所以......我不知道切换是一个点击处理程序。我该如何解决这个问题？
通过添加切换到您想要交替点击的元素（#login）.. 或者只是做一个常规点击并检查 div 的高度...
啊哈 :) 谢谢！我只是不知道toggle是一个点击处理程序......我开始搞乱jQuery......今天:)