Javascript 我在网上找到的这个切换脚本只对父id有效，对父-子id无效

我有这个切换脚本，我想知道为什么这个切换触发器div的红色部分只起作用。例如，如果您单击任何一个金色或银色的子项，则不会发生任何事情

所以，我怎样才能让它在父div中的任何元素也能触发切换效果的情况下工作呢

这是我的密码

document.addEventListener（'DOMContentLoaded'，function（）{
var container=document.querySelector（'.container'）；
container.addEventListener（'click'，函数（execute）{
execute.stopPropagation（）；
});
document.addEventListener（“单击”，关闭容器）；
函数闭合容器（obj）{
var containerVar=document.querySelector（'.container'）；
if（containerVar.style.display==='block'）{
containerVar.style.display='none'；
}else if（obj.target.id=='toggle'）{
containerVar.style.display='block'；
}
}
});
#切换{
背景色：红色；
显示：内联块；
填充：15px；
-webkit触摸标注：无；/*iOS Safari*/
-webkit用户选择：无；/*Safari*/
-khtml用户选择：无；/*Konquer或HTML*/
-moz用户选择：无；/*Firefox*/
-ms用户选择：无；/*Internet Explorer/Edge*/
用户选择：无；/*无前缀版本，当前
由Chrome和Opera支持*/
}
#切换#a{
背景颜色：金色；
保证金：0；
}
#切换#b{
背景颜色：银色；
保证金：0；
}
.集装箱{
背景颜色：绿色；
高度：350px；
宽度：350px；
左边距：自动；
右边距：自动；
显示：无；
}

小孩
小孩
问题在于：
if（obj.target.id=='toggle'）

当您单击子元素时，它们将成为
obj.target
，并且它们没有
id
的
toggle
。如果您只是删除该条件并使用一个简单的
else
，它就会起作用

另外，设置了两个不同的变量来指向
.container
元素，这是不必要的。我在下面纠正了这个问题


document.addEventListener（'DOMContentLoaded'，function（）{
var container=document.querySelector（'.container'）；
var toggle=document.getElementById（“toggle”）；
var a=document.getElementById（“a”）；
var b=document.getElementById（“b”）；
document.getElementById（“切换”）.addEventListener（“单击”，关闭容器）；
函数闭合容器（obj）{
if（container.style.display==='block'）{
container.style.display='none'；
}否则{
container.style.display='block'；
}
}
文档.添加的EventListener（“单击”，函数（evt）{
//检查以确保容器、开关或
//子元素不是单击的元素
if（evt.target！==container&&evt.target！==toggle&&evt.target！==a&&evt.target！==b）{
container.style.display='none'；
}
});
});
#切换{
背景色：红色；
显示：内联块；
填充：15px；
}
#切换#a{
背景颜色：金色；
保证金：0；
}
#切换#b{
背景颜色：银色；
保证金：0；
}
.集装箱{
背景颜色：绿色；
高度：350px；
宽度：350px；
左边距：自动；
右边距：自动；
显示：无；
}

小孩
小孩
检查事件目标的ID时，它将返回所单击元素的ID，而不是其父元素的ID。您可以添加一行代码来检查目标元素的父元素是否具有“toggle”ID（
obj.target.ID=='toggle'| | | obj.target.parentElement.ID=='toggle'
），或者将事件侦听器添加到toggle元素可能更容易（参见下面的示例）


document.addEventListener（'DOMContentLoaded'，function（）{
var container=document.querySelector（'.container'）；
container.addEventListener（'click'，函数（execute）{
execute.stopPropagation（）；
});
document.addEventListener（“单击”，关闭容器）；
document.getElementById（'toggle'）。addEventListener（'click'，函数（事件）{
//如果单击了具有“toggle”ID的元素或其任何子元素，将调用此事件
var containerVar=document.querySelector（'.container'）；
if（container.style.display！=='block'）{
//展示容器
container.style.display='block'；
//防止触发文档单击侦听器
event.stopPropagation（）；
}
});
函数闭合容器（obj）{
var containerVar=document.querySelector（'.container'）；
containerVar.style.display='none'；
}
});
#切换{
背景色：红色；
显示：内联块；
填充：15px；
-webkit触摸标注：无；/*iOS Safari*/
-webkit用户选择：无；/*Safari*/
-khtml用户选择：无；/*Konquer或HTML*/
-moz用户选择：无；/*Firefox*/
-ms用户选择：无；/*Internet Explorer/Edge*/
用户选择：无；/*无前缀版本，当前
由Chrome和Opera支持*/
}
#切换#a{
背景颜色：金色；
保证金：0；
}
#切换#b{
背景颜色：银色；
保证金：0；
}
.集装箱{
背景颜色：绿色；
高度：350px；
宽度：350px；
左边距：自动；
右边距：自动；
显示：无；
}

小孩
小孩
我知道我回答这个问题已经晚了，但是在看了这篇文章并用这个脚本做了一些实验之后。我的方法将解决您的所有问题，因此我注意到，单击侦听器在大多数设备上都能很好地使用此脚本，但在苹果移动设备等设备上，单击侦听器无法使用

这个脚本让我意识到，要在苹果移动设备上使用它，你必须将点击监听器换成touchstart监听器。我决定解决这个问题的最好办法是