3

我有一个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')
  }
});
4

3 回答 3

1

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

var aboveDiv = false;

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

$(document).click(function () { 
  if (!aboveDiv) $('#yourDiv').hide();
  aboveDiv = false;
});
于 2012-09-19T05:10:33.837 回答
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();
    });
});

还要检查“当用户在 DIV 外部单击时使用 jQuery 隐藏 DIV ”。

于 2012-09-19T05:07:30.973 回答
0

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

演示 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

于 2012-09-19T07:53:15.967 回答