Jquery Div隐藏

Question

我有一个包含输入控件的div标记。当用户单击菜单项时，将打开此div。当点击位于div区域之外时，我想要隐藏此标记。

目前，我可以在外部点击时隐藏div，但当我点击div中的任何输入控件时，我的div会隐藏。我该如何解决这个问题？

我的代码是：

$(document).click(function (e) {
  var elem = $(e.target).attr('id');
  console.log(e.target);

  if (elem !== 'btnLogin') {
    // if (elem != 'TxtUserName' && elem != 'TxtPassword')
    HideLoginDetails();
  }

  if (elem !== 'hpUseFul') {
    // if(elem !== 'y')
  }
});

Answer 1

jQuery(document).ready(function()
{
    $('the div you want').hover(function(){ 
        mouse_inside=true; 
    }, function(){ 
        mouse_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_inside) $('the div you want').hide();
    });
});

同时选中“Use jQuery to hide a DIV when the user clicks outside of it”。

Answer 2

演示：http://jsfiddle.net/3fbpA/

var aboveDiv = false;

$('#yourDiv').click(function () { 
  aboveDiv = true;
});

$(document).click(function () { 
  if (!aboveDiv) $('#yourDiv').hide();
  aboveDiv = false;
});

Answer 3

我为上述问题做了完整的垃圾箱。你可以在这里查看演示链接...

演示 http://codebins.com/bin/4ldqp71

<强> HTML

<div id="loginDialog">
  <div class="field">
    <label>
      User Name: 
    </label>

    <span class="input">
      <input type="text" value="" id="txtuser" size="15"/>

    </span>
  </div>
  <div class="field">
    <label>
      Password: 
    </label>

    <span class="input">
      <input type="password" value="" id="txtpassword" size="15"/>

    </span>
  </div>
  <div class="field">
    <input type="button" id="btn_ok" value="Login" />
  </div>
</div>
<div>
  <a href="javascript:void(0);" id="btnLogin">
    Login
  </a>
  <a href="javascript:void(0);" id="btnMenu1">
    Menu1
  </a>
  <a href="javascript:void(0);" id="btnMenu2">
    Menu2
  </a>
</div>

<强> JQuery的

$(function() {
    $("#btnLogin").click(function() {
        $("#loginDialog").show(500);
    });
    $(document).click(function(e) {
        e.preventDefault();
        var elem = $(e.target).attr('id');
        if ($(e.target).parents("#loginDialog").length) {
            $("#loginDialog").show();
        } else {
            if ($(e.target).attr('id') !== "btnLogin") {
                $("#loginDialog").hide(300);
            }
        }
    });
});

<强> CSS

#loginDialog{
  border:1px solid #333;
  padding:4px;
  background:#2A2A2A;
  width:250px;
  color:#dfdfdf;
  display:none;
}
#loginDialog input{
  border:1px solid #efefef;
}
#loginDialog input[type=button]{
  background:#ababab;
}
#loginDialog input[type=button]:hover{
  background:#cfcfcf;
}
#loginDialog .field{
  text-align:center;
  margin-bottom:5px;
}
#loginDialog label{
  display:inline-block;
  width:100px;
}
a{
  display:inline-block;
  margin-left:8px;
}

演示 http://codebins.com/bin/4ldqp71