jquery - 关注事件在 jquery 中没有按预期工作

Question

这是我正在使用的 JavaScript:

<script type="text/javascript">

    $(document).ready(function(){
        var left_pos= document.getElementById('login_button').offsetLeft;
        var top_pos= document.getElementById('login_button').offsetTop+5;
        document.getElementById('login_box_pane').style.left=left_pos;
        document.getElementById('login_box_pane').style.top=top_pos;
        $("#login_button").click(function(){$("#login_box_pane").slideToggle(1200);});
            $("#login_box_pane").focusout(function(){$("#login_box_pane").slideUp(1200);
        });
    });
</script>

这是我正在使用的 html。

   <a id="login_button">login</a> 
   <div id="login_box_pane"  >
     Username: <input type="text"/> 
     Password:<input type="password"/>
   </div>

这是我使用的 CSS:

#login_box_pane
{
    display:none;
    background-color:#FFBE7D;
    z-index:50;
    width:180px;
    height:130px;
    position:absolute;
}

我想要的功能是，每当单击“登录”时，下面就会出现一个小框，询问用户名和其他详细信息，并且当再次单击“登录”或其他任何地方时，它应该消失页面，这是一个焦点......但它不是那样工作的。我什至尝试过 mouseout 和其他事件，但运气不好。代码有什么问题？

还有其他方法可以实现吗？

Answer 1

这是你的答案:

$(document).click(function(e) {
    if($(e.target).attr('id') == 'login_button')
       $("#login_box_pane").slideToggle(1200);
    else
       $("#login_box_pane").slideUp(1200);
});

注意:

1. e.target 返回点击事件发生在哪个元素上
2. $(e.target).attr('id') == 'login_button' 正在检查点击元素的 id 以及 id 是 login_button 的，然后是 'login_box_pane' slideToggle 否则它会隐藏

这是另一个代码片段:

$("#login_button").click(function(){ 
    $("#login_box_pane").slideToggle(1200).children('input:first').focus();// here I `foucs()` on first input box of the login panel
    return false;
});
$("#login_box_pane").focusout(function(){
    $("#login_box_pane").slideUp(1200);
});

您的代码的修改版本:

("#login_button").click(function(){ 
    $("#login_box_pane").slideToggle(1200,function(){
        $('input:first',this).focus();// Here I just make focus() on input that is your `#login_boz_pane`
    });
    return false;
});
$("#login_box_pane").focusout(function(e){
    $(this).slideUp(1200);
});