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