Question

我想基于点击显示和隐藏一些元素。我有两个按钮，当您单击其中一个按钮时，它将显示一个表单，如果您单击另一个按钮，它将显示另一个表单。现在我想要的是，如果有人点击按钮它会显示表格然后如果他点击其他地方那个表格应该被隐藏。我按照代码

完成了他的第一部分

$(document).ready(function(){
    $("#login_btn").click(function(){
      $("#login_form").toggleClass("hide");
      $("#signup_form").addClass("hide");
    });
    $("#signup_btn").click(function(){
      $("#signup_form").toggleClass("hide");
      $("#login_form").addClass("hide");
    });
    $(".container > :not(#login_btn)").click(function(){
      $("#signup_form").addClass("hide");
      $("#login_form").addClass("hide");
    });
  });

现在我想在其他地方点击时隐藏这些表单。我尝试使用$（＆＃39; body＆gt;：not（＆＃39;＃login_form，＃signup_form＆＃39;），但它也会禁用按钮的活动，当我点击按钮时它没有＆＃39 ; t显示表格。我已经在stackoverflow和其他地方搜索了类似的问题，但没有一个解决方案有效。所以有人知道怎么做吗？

Answer 1

您可以通过快速搜索单击的位置来隐藏任何元素。你想知道的是：我点击了文件吗？我点击了按钮吗？否则，我点击了表格吗？如果我点击表单，请不要关闭它。如果我在表单外单击，请关闭表单。

$(document).click(function(event){
    var target = $(event.target);
    /* if the target is a button, don't continue as we want to keep its click */
    if(target.attr("id") === "login_btn" || target.attr("id") === "signup_btn"){
        return;
    }
    /* lets see if the target, or any of its parents, has the form id we are looking for */
    /* if it doesn't, hide that form */
    if(!target.closest("#login_form").length){
        $("#login_form").hide();
    }
    if(!target.closest("#signup_form").length){
        $("#signup_form").hide();
    }
});

更新

抱歉，点击应该在文档上，我使用的ID不正确。所有form-id现在都使用下划线而不是破折号（即login_form）。我在第三个中使用了一个错误的id，如果在我检查signup_form时指向登录表单。我已经修改过，尝试过它确实有效。

通过jquery选择除少数元素之外的每个元素

1 个答案:

更新