我正在构建一个网站，其中不同的层divs显示不同的部分。基本上它是这样构建的：
团体
多个选项（按钮；选择子组之一）
小组
多个选项（按钮；选择子组之一）
子组等
目前我使用jQuery来激活不同divs，但我想之间的导航divs通过点击它们的外面去激活或点击另一个div/button所以它否决当前的活动div。
JQuery 和/或 CSS 中是否有（简单的）解决方案来实现这一点？我尝试了多种方法，但每次都错误地divs停用或弹出。我想我在这里缺少一个数学解决方案..
我尝试使用removeClassand addClass，toggleClass或toggle结合使用and.active显示 的类。它们在使用几层或仅使用两层时有效，但是当有多个层和组合时，我无法找到正确的解决方案。divdisplay:nonedisplay:blockdivs
// ACTIVATE DIVS
$(document).ready(function() {
// 1. CONTINENTS
$(".select-europe").click(function() {
$("#official_countries").addClass("active");
});
// 2. RECOGNIZED STATES
// 2.EU EUROPE
$(".select-france").click(function() {
$("#france-country").addClass("active");
});
$(".select-netherlands_the").click(function() {
$("#netherlands_the-country").addClass("active");
});
// 3. STATE
// 3.EU.FR FRANCE
$(".select-france-divisions").click(function() {
$("#france-divisions").addClass("active");
});
// 3.EU.NL NETHERLANDS, THE
$(".select-netherlands_the-divisions").click(function() {
$("#netherlands_the-divisions").addClass("active");
});
});
// DE-ACTIVATE DIVS
$(document).on("click", function(event) {
// 1. CONTINENTS
// 2. RECOGNIZED STATES
// 2.EU EUROPE
var $trigger = $(".select-france");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#france-country").removeClass("active");
}
var $trigger = $(".select-netherlands_the");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#netherlands_the-country").removeClass("active");
}
// 3. STATE
// 3.EU.FR FRANCE
var $trigger = $(".select-france-divisions");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#france-divisions").removeClass("active");
}
// 3.EU.NL NETHERLANDS, THE
var $trigger = $(".select-netherlands_the-divisions");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#netherlands_the-divisions").removeClass("active");
}
});
大话西游666
相关分类