在活动 div 上（使用 JQuery）时，如何切换彼此分开的其他 div？

Question

我正在构建一个网站，其中不同的层divs显示不同的部分。基本上它是这样构建的：

1. 团体

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

2. 小组

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

3. 子组等

目前我使用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");

  }

});

Answer 1

您当然必须根据您的需要调整样式和 html：$('li').on("click", function(e) {&nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; let $el = $(this);&nbsp; if(!$el.children('ul').hasClass('active')) {&nbsp; &nbsp; $('#tree').find('ul').removeClass('active');&nbsp; &nbsp; $el.parentsUntil('#tree').addClass('active');&nbsp; }&nbsp; $el.children('ul').toggleClass('active');});ul {&nbsp; list-style-type: none;&nbsp; display:none;}#tree {&nbsp; display:block;}li {&nbsp; cursor: pointer;&nbsp; background: #F1F1F1;&nbsp; padding: 5px;&nbsp; border: 1px solid #CECECE;}.active {&nbsp; display: block;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul id="tree">&nbsp; <li>EU&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li>FR&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Division 1</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Division 2</li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li>NL&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Division 1</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Division 2</li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </li>&nbsp; <li>US&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li>TX&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Division 1</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Division 2</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li>NY&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Division 1</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Division 2</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; </li></ul>