Javascript 单击元素本身时切换类，单击外部时删除

我有一个dom元素列表：

• 当我单击该元素时，它将切换为打开和关闭
• 当我单击打开的子对象时，它不会关闭父对象
• 当我点击另一个按钮时，它会打开被点击的按钮并关闭其他按钮
• 当我在已打开的元素外部单击时，它将关闭然后打开

->问题是我无法归档第一个。有人知道我做错了什么吗？

$（“.front”）。单击（函数（）{
$（.front”）.not（this.removeClass（“active”）；
$（此）.addClass（“活动”）；
});
$（文档）.mouseup（函数（n）{
var t=[]；
t、 推动（$（“.front”）；
$。每个（t，函数（t，i）{
$（i）.is（n.target）|$（i）.has（n.target）.length！==0 | |$（i）.removeClass（“活动”）
})
});
.front{
位置：相对位置；
背景色：红色；
宽度：100px；
高度：100px；
利润率：20px；
}
.前面，后面{
位置：绝对位置；
最高：50%；
左：150px；
显示：无；
背景颜色：绿色；
宽度：50px；
高度：50px；
}
.前.主动.后{
显示：块；
}
只需在第一行之后添加切换类：

$(".front").click(function() {
$(".front").not(this).removeClass("active");
$(this).toggleClass("active");

}))
 只需在第一行之后添加切换类：

$(".front").click(function() {
$(".front").not(this).removeClass("active");
$(this).toggleClass("active");

}))
 如果使用toggleClass，则内部的子级也将被切换，我只希望父级的子级被切换，然后添加。之后的父级（这）在我的情况下不起作用，当我单击子级时，它仍然被切换如果使用toggleClass，则内部的子级也将被切换，我只希望父级的子级被切换，然后添加。之后的父级（这）在我的情况下不起作用，当我单击子对象时，它仍然会切换