Javascript隐藏元素(当在外面点击时）具有某些条件

Javascript hide element (when clicked outside) with certain conditions

本文关键字：条件 元素 隐藏 在外面 Javascript      更新时间：2023-09-26

所以这里有很多关于在它外面点击时隐藏div的问题。但我有一件事，有一个div（帐户编辑表名称编辑），它首先单击时显示隐藏的div（帐户编辑组）。然后 - 如果我点击div（帐户编辑组）之外的其他地方 - 它必须隐藏。这是我的代码，我正在尝试执行两个不同的条件（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"）

好吧，如果我单击带有类"帐户-编辑-表-名称-编辑"的div - 系统将立即向我显示警报（"隐藏"），尽管它必须查看条件并忽略它。有什么方法可以解决这个问题吗？

查看 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

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

在这里你可以做什么：

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

尝试使用 .hide（） 而不是 removeclass

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

以下是您需要的：

  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');
    }
});
相关文章：