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);
});

注意：

e.target返回click事件发生的元素

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

Answer 2

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

这似乎正确地解决了我的问题。

聚焦事件在jquery中没有按预期工作

2 个答案: