Javascript隐藏元素（当在外部点击时）在某些条件下

Question

因此，当您点击外部元素时隐藏div的问题很多。但我有一件事，有一个div（accounts-edit-table-name-edit），它首先显示隐藏的div（account-edit-group）。然后 - 如果我点击其他地方（帐户编辑组），它必须隐藏。这里是我的代码，我正在尝试做两个不同的条件（OR）：

$(document).click(function(event) { 
     if($(event.target).parents().index($('.account-edit-group')) == -1 || $(event.target).parents().index($('.accounts-edit-table-name-edit')) == -1) 
      { 
       if($('.account-edit-group').is(":visible")) 
        { 
        $('.account-edit-group').removeClass('acc-edit-f'); 
         alert("hiding") 
        } 
      }   
    }); 

HTML：

<div class="accounts-edit-table-name-edit">"button"</div> 
<div class="account-edit-group">block</div> 

（类 “ACC编辑-F” 只包含 “显示：块”）

好吧，如果我点击类“accounts-edit-table-name-edit”的div，系统会立即显示警报（“隐藏”），尽管它必须查看条件并忽略它。有什么方法可以解决这个问题吗？

Answer 1

看到的jsfiddle如果是你想要什么：

http://jsfiddle.net/5E6C6/2/

​​

Answer 2

这是因为parents不包含第一个元素，即e.target。

在这里，你能做些什么：

if(!$(event.target).closest('.account-edit-group, .accounts-edit-table-name-edit').length) 

Answer 3

尝试使用.hide()代替removeclass

$(".account-edit-group").hide(); 

Answer 4

这里是你需要的东西：

1. 添加隐藏按钮内
2. 停止事件传播所显示的元素/当两个要素之一被点击
3. 绑定onclick事件的文件和隐藏所有子元素

这里是一个工作示例我为你写：

http://jsfiddle.net/T2b4z/2/

$(document).click(function(event) { 

    var clickedElement = $(event.target); 

    if (clickedElement.hasClass('accounts-edit-table-name-edit') || clickedElement.parents().hasClass('accounts-edit-table-name-edit')) { 
     $('.account-edit-group').removeClass('acc-edit-f'); 
     return false; 
    }else { 
     $('.account-edit-group').addClass('acc-edit-f'); 
    } 
});