Question

所以这里有很多关于在你点击它之外隐藏div的问题。但我有一件事，有一个div（accounts-edit-table-name-edit），它首先显示隐藏的div（account-edit-group）。然后 - 如果我要点击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-edit-f”类只包含“display：block”）

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

Answer 1

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

你可以做什么：

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

Answer 2

如果你想要的话，请看jsfiddle：

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

 $(event.target).parents().index($('.account-edit-group')) //always return -1
 $(event.target).parents().index($('.accounts-edit-table-name-edit')) // this too

Answer 3

尝试使用.hide()代替removeclass

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

Answer 4

以下是您的需求：

添加按钮内显示/隐藏的元素
单击两个元素之一时停止事件传播
在文档上绑定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');
    }
});

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

4 个答案: