单击/退出元素时隐藏表单

Question

我在一页上有几个表格。当我点击外部时，每个都需要隐藏

div class="login">
  <p><a title="Entrar" href="static-login.html">Entrar</a></p>
  <form action="" class="disabled" method="post" id="login">
    <p class="close"><a title="Cerrar" href="static.html">Cerrar</a></p>
    <h2>¿Es usted ya cliente?</h2>
    <p class="email">
      <label for="email">Su correo electrónico</label>
      <input id="email" name="email" type="text" placeholder="Su correo electrónico" />
    </p>
    <p class="password">
      <label for="password">Su contraseña</label>
      <input id="password" name="password" type="text" placeholder="Su contraseña" />
    </p>
    <p class="button">
      <input type="submit" value="Entrar" />
    </p>
  </form>
</div>

所以我得到的 jquery 是

$(document).ready(function() {
  $('.layer').hide();
  $('.login form').hide();
  $('.login a').click(function(){
    $('.login form').toggle();
    $('.layer').toggle();
    $(".login form input:text").first().focus();
  });
  $(".login form input").focusout(function() {
    $('.login form').hide();
    $('.layer').hide();
  });
});

但一旦我从电子邮件转到密码，它就会隐藏所有内容，因此 .focusout 不起作用

我尝试了 $('body').click(function() { 而不是 .focusout 但它破坏了其他 jquery :-/

有什么想法吗？

Answer 1

在选择器中使用 :not

$(":not(.login form input)").click(function() {
    $('.login form').hide();
    $('.layer').hide();
});