Javascript 如何隐藏动态单击外部的子元素？

我可以通过添加此代码中的每个子元素来隐藏子元素：

window.addEventListener('mouseup', function(event){
let children = parent[0].children[0]
if (event.target != children && event.target.parentNode != children){
    children.style.display = 'none';
  }
});

但是，如何隐藏子ul元素在子ul元素外部单击（使用for循环或其他方式），而不将此代码添加到每个子元素

在这段代码中，我在单击父li元素时显示子ul元素

var parent=document.querySelectorAll（'body>ul>li'）；
父级[0]。addEventListener（'click'，函数（）{
父[0]。子[0]。style.display='block'；
});
父[1]。addEventListener（'click'，函数（）{
父[1]。子[0]。style.display='block'；
});
父[2]。addEventListener（'click'，函数（）{
父[2]。子[0]。style.display='block'；
});
window.addEventListener（'mouseup'，函数（事件）{
让子项=父项[0]。子项[0]
if（event.target！=子项&&event.target.parentNode！=子项）{
children.style.display='none'；
}
});
ul>li>ul{
显示：无；
}
李先生{
宽度：最大含量；
}

父母1

孩子1


父母2

孩子2


父母3

孩子3


如果我理解您的问题：用户单击任何子元素，子状态（隐藏）中不应该有任何更改。您可以使用以下代码（我假设您只使用ES5）。如果要在父级单击时隐藏子元素，请删除
isParentClick（）
方法


var parent=document.querySelectorAll（'body>ul>li'）；
var len=parent.length；
对于（var i=0；i如果我理解您的问题：用户单击任何子元素，子元素状态（hide）中不应该有任何更改。您可以使用以下代码（我假设您仅使用ES5）。如果要在父元素单击时隐藏子元素，请删除
isParentClick（）
方法


var parent=document.querySelectorAll（'body>ul>li'）；
var len=parent.length；
对于（var i=0；i您可以使用
document.querySelectorAll
而不是针对单个元素
由于要显示子项，单击将在
li
上，因此再次执行
querySelector
并选择
ul
并添加样式

注意使用
stopPropagation
。还有另一个事件附加到
body
，因此任何单击
body
都将隐藏子项。stopPropagation的用法是防止事件在
bubling
阶段单击li和单击body都将同时发生

尸体的边缘是红色的


var parent=document.querySelectorAll（'body>ul>li'）；
parent.forEach（函数（项）{
item.addEventListener（'click'，函数（e）{
e、 停止传播（）
item.querySelector（'ul'）.style.display='block'；
})
document.body.addEventListener（'click'，函数（e）{
document.querySelectorAll（'.parent'）.forEach（函数（项）{
item.querySelector（'ul'）.style.display='none'
})
})
})
ul>li>ul{
显示：无；
}
ul，
李{
宽度：最大含量；
}
身体{
边框：1px纯红；
}

父母1

孩子1


父母2

孩子2


父母3

孩子3


您可以使用
document.querySelectorAll
而不是针对单个元素
由于要显示子项，单击将在
li
上，因此再次执行
querySelector
并选择
ul
并添加样式

注意使用
stopPropagation
。还有另一个事件附加到
body
，因此任何单击
body
都将隐藏子项。stopPropagation的用法是防止事件在
bubling
阶段单击li和单击body都将同时发生

尸体的边缘是红色的


var parent=document.querySelectorAll（'body>ul>li'）；
parent.forEach（函数（项）{
item.addEventListener（'click'，函数（e）{
e、 停止传播（）
item.querySelector（'ul'）.style.display='block'；
})
document.body.addEventListener（'click'，函数（e）{
document.querySelectorAll（'.parent'）.forEach（函数（项）{
item.querySelector（'ul'）.style.display='none'
})
})
})
ul>li>ul{
显示：无；
}
ul，
李{
宽度：最大含量；
}
身体{
边框：1px纯红；
}

父母1

孩子1


父母2

孩子2


父母3

孩子3


但如何使再次单击父元素时隐藏子元素
。例如，单击父元素时显示子元素1，再次单击时显示子元素时隐藏子元素1。@GalibHasanov看一看切换开关
我更改代码。看起来它正在工作，但现在当我单击子元素时隐藏子元素。但如何使再次单击父元素时隐藏子元素
。例如，单击parent1 show child1，然后再次单击parent1 hide child1。@GalibHasanov看一看
切换
我更改了代码。看起来它在工作，但现在当我单击child元素时隐藏了它。但是如何在再次单击parent
时隐藏child
。例如，单击parent1 show child1，然后再次单击parent1隐藏孩子1。Thanks@GalibHasanov您可以在单击父项时检查chid显示状态。请检查更新的代码。但现在我单击了子项，然后它隐藏了。如何避免这种情况？嗯。如果我们单击子项，我们也会触发父项单击事件。我在更新的代码库中添加了一个条件。它现在应该可以工作了。但是单击paren时如何进行设置再次，隐藏子对象
。例如，单击pare