Javascript 在使用活动div（使用JQuery）时，如何切换彼此独立的其他div？

我正在建立一个网站，其中不同的

div层

显示不同的部分。基本上是这样建立起来的：

团体

• 多个选项（按钮；选择一个子组）

子群

• 多个选项（按钮；选择一个子组）

子群 等等

目前我正在使用JQuery激活不同的

div

，但我想通过单击div之外的部分来取消激活，或者通过单击另一个

div

/

按钮来在
div
之间导航，因此它会覆盖当前活动的
div

JQuery和/或CSS中是否有（简单的）解决方案来实现这一点？我尝试了多种方法，但每次都出错
divs
de-activate或弹出窗口。我想我缺少一个数学解

我尝试将
removeClass
和
addClass
，
toggleClass
或
toggle
与
活动的
类结合使用，该类通过使用
显示：无和
显示：块来显示
div
。当使用几个
div
或仅仅两个层时，它们就可以工作，但是当有多个层和组合时，我无法找到正确的解决方案


//激活DIVS
$（文档）.ready（函数（）{
//1.大陆
$（“.select europe”）。单击（函数（）{
美元（“#官方#国家”）.addClass（“活动”）；
});
//2.得到承认的国家
//2.欧洲联盟
$（“.select france”）。单击（函数（）{
$（“#法国国家”）.addClass（“活动”）；
});
$（“.select-u the”）。单击（函数（）{
$（“荷兰全国”）.addClass（“活动”）；
});
//3.国家
//3.EU.FR法国
$（“.select france divisions”）。单击（函数（）{
美元（“#法国分部”）.addClass（“活动”）；
});
//3.EU.NL荷兰，荷兰
$（“.select-nertherlands\u-divisions”）。单击（函数（）{
美元（“#荷兰#u-divisions”）.addClass（“活动”）；
});
});
//取消激活div
$（文档）。在（“单击”）上，函数（事件）{
//1.大陆
//2.得到承认的国家
//2.欧洲联盟
var$trigger=$（“.select france”）；
if（$trigger！==event.target&！$trigger.has（event.target.length）{
$（“#法国国家”）.removeClass（“活动”）；
}
var$trigger=$（“.select-the”）；
if（$trigger！==event.target&！$trigger.has（event.target.length）{
$（“荷兰全国”）。removeClass（“活动”）；
}
//3.国家
//3.EU.FR法国
var$trigger=$（“.select france divisions”）；
if（$trigger！==event.target&！$trigger.has（event.target.length）{
$（“法国分部”）。删除类（“活动”）；
}
//3.EU.NL荷兰，荷兰
var$trigger=$（“.select-nertherlands_-divisions”）；
if（$trigger！==event.target&！$trigger.has（event.target.length）{
$（“#荷兰#U-divisions”）.removeClass（“活动”）；
}
});
#大陆{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：#e6；
}
#官方国家，
#法国国家，
#法国分部，
#荷兰，
#荷兰欧洲分部{
显示：无；
位置：绝对位置；
排名：0；
身高：100%；
左边框：1px纯黑；
}
#官方国家{
左：120px；
宽度：钙（100%-121px）；
背景色：#ccc；
}
#法国国家，
#荷兰{
左：240px；
宽度：钙（100%-241px）；
背景色：#B3；
}
#法国分部，
#荷兰欧洲分部{
左：360px；
宽度：钙（100%-361px）；
背景色：#999；
}
#官方(u)国家,，
#荷兰是一个活跃的国家，
#法国-国家，
#法国-法国，
#荷兰_-divisions.active{
显示：块；
}
.选择国家{
显示：块；
}
.科{
显示：块
}

欧洲
法国
荷兰
法兰西共和国
法国
荷兰
当然，您必须根据需要调整样式和html：


$（'li'）。在（“单击”上，函数（e）{
e、 停止传播（）；
设$el=$（此）；
如果（！$el.children（'ul'）.hasClass（'active'））{
$（“#树”）.find（'ul'）.removeClass（'active'）；
$el.parentsUntil（'#tree'）.addClass（'active'）；
}
$el.children（'ul'）。toggleClass（'active'）；
});
ul{
列表样式类型：无；
显示：无；
}
#树{
显示：块；
}
李{
光标：指针；
背景#f1f1；
填充物：5px；
边框：1px实心#CECECE；
}
.主动{
显示：块；
}


欧盟

FR

第一分部
第2分部


NL

第一分部
第2分部




美国

德克萨斯州

第一分部
第2分部


纽约

第一分部
第2分部




请提供一个与您所说的相符的示例。当我在您当前显示的内容中单击
欧洲
，然后单击
法国
和
荷兰时，
就会显示出来，但仅此而已-无论我在哪里以及之后单击什么，似乎都不会发生任何其他事情。这可能更有意义，如果HTML结构与开始时的数据结构相匹配。这应该是一个嵌套结构，而不是像兄弟一样在空间中浮动的div。@04FS以某种奇怪的方式在我的浏览器中工作，而不是在这个代码段中，我现在正在深入研究它。嵌套结构听起来绝对是一个很好的解决方案，你有什么例子或链接，我可以看看吗