Question

好的，所以我有一个Login表单，我正在使用Jquery在使用.slideUp（）和.slideDown（）的DIV中显示它。

如果你单击.account div来关闭它（触发幻灯片），可以告诉我为什么表单正在进行双泵（滑动，滑动，滑动）...... ???

如果我在表单外单击并使用此代码将其关闭...

$(".modal_div").live("blur", function(){

        $(".account").removeClass('expand');
        $(this).slideUp();

});

这是我用来滑动/滑动的代码......

$(".account").click(function() {

    if ($(".account").hasClass("expand")) {

        $(".account").removeClass("expand");
        $("#accdropdown").slideUp();
    } else {

        $(".account").addClass("expand");
        $("#accdropdown").slideDown();
        $("#login-username").focus();   
    }       
});

这是HTML ...

<div class="account">


    <div id="accdropdown" class="modal_div">
    <form action="" method="post">

        <p>
        <label for="login-username">Username</label><br>
        <input type="text" name="user_name" tabindex="1" id="login-username">
        </p>
        <p>
        <label for="login-password">Password</label><br>
        <input type="password" name="password" tabindex="2" id="login-password">
        </p>
        <p class="right">
        <button type="submit" tabindex="3"><span>Log in</span></button>

        </p>

        </form>
        </div>
        <p>Login</p>
    </div>

以及CSS以防万一:) ...

.account {

    width: 100px;
    height: 78px;
    background: #939393;
    margin-right:100px;
    clear:both;
    float:right;
    cursor:pointer;
}


#accdropdown {
    position:absolute;

    right:0;
    top:22px;
    display:none;
    overflow:hidden;
    z-index:10000;
    width:170px;
    padding:6px 8px 6px;
    border:1px solid #ccc;
    text-align:left;
    background:#e4e4e4 none no-repeat 0 0;
    }

我已经把头发扯了好几个小时了，真的很感激一些建议......

Answer 1

问题在于，在打开新输入后点击灰色框时会出现“模糊”现象。

首先它模糊（向上）然后它运行点击[并且因为模糊已经运行]（它下降）

现在......如何最好地解决这个问题？...从你开始可能不想使用blur，因为当用户填写用户名并点击[tab]时，div消失了......你希望它如何运作？

如果你想要它，那么当用户点击“其他地方”时，.modal_div会消失，我会使用叠加层。here就是一个例子。

PS：如果你不需要，你应该避免使用live。

<强>已更新选项1：http://jsfiddle.net/mazlix/KztWD/3/

这会将登录置于叠加层之上......如果这是您不想要的内容，请使用

选项2：http://jsfiddle.net/mazlix/KztWD/4/

Answer 2

可能这会有所帮助

$(".account").click(function(event) {  

        $(".account").addClass("expand");
        $("#accdropdown").slideDown();
        return false;

});

    $(document).click(function(event) {
    if ( !$(event.target).hasClass('expand')) {
           $(".account").removeClass("expand");
        $("#accdropdown").slideUp();

    }
});

这里是小提琴http://jsfiddle.net/3nigma/tknKL/1/

Jquery .live。添加/删除登录幻灯片/滑动的类

2 个答案: