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

また、「 jQueryを使用して、ユーザーがDIVの外側をクリックしたときにDIVを非表示にする」もチェックしてください。

于 2012-09-19T05:07:30.973 に答える
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 に答える
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 に答える