javascript - 在事件的 div 上(使用 JQuery)，如何将其他 div 彼此分开？

Question

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

1. 集团
   • 多个选项(按钮；选择子组之一)
2. 子组
   • 多个选项(按钮；选择一个子子组)
3. 子组 等

目前我正在使用 JQuery 来激活不同的 div，但我想在 div 之间导航，方法是单击它们外部以取消激活或单击另一个 div/button 因此它会否决当前事件的 div。

在 JQuery 和/或 CSS 中是否有一个(简单的)解决方案来实现这一点？我尝试了多种方法，但每次都出现错误的 divs 取消激活或弹出窗口。我想我在这里缺少数学解决方案..

我尝试将 removeClass 和 addClass、toggleClass 或 toggle 与 .active 结合使用 类，它使用 display:none 和 display:block 显示 div。它们在使用几个 div 或仅两层时有效，但当有多个层和组合时，我无法找到正确的解决方案。

// 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");
  }
});

#continents {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: #e6e6e6;
}

#official_countries,
#france-country,
#france-divisions,
#netherlands_the-country,
#netherlands_the-divisions {
    display: none;
    position: absolute;
    top: 0;
    height: 100%;

    border-left: 1px solid black;
}

#official_countries {
    left: 120px;
    width: calc(100% - 121px);

    background-color: #ccc;
}
#france-country,
#netherlands_the-country {
    left: 240px;
    width: calc(100% - 241px);

    background-color: #b3b3b3;
}

#france-divisions,
#netherlands_the-divisions {
    left: 360px;
    width: calc(100% - 361px);

    background-color: #999;
}

#official_countries.active,
#netherlands_the-country.active,
#france-country.active,
#france-divisions.active,
#netherlands_the-divisions.active {
  display: block;
}

.select-country {
  display: block;
}
.section {
  display: block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="continents">
  <button class="select-europe">Europe</button>
</div>
<div id="official_countries">
  <div class="overview">
    <button class="select-country select-france">France</button>
    <button class="select-country select-netherlands_the">Netherlands, the</button>
  </div>
</div>
<div id="france-country">
  <header>French Republic</header>
  <div class="overview">
    <div class="section">
      <button class="select-france-divisions">France</button>
    </div>
  </div>
</div>
<div id="netherlands_the-country">
  <button class="select-netherlands_the-divisions">Netherlands, the</button>
</div>
<div id="france-divisions"></div>
<div id="netherlands_the-divisions"></div>

我希望之前的每个 div(激活其上方的 div)在点击上方的 div 之外时会再次关闭。但在 div 之间，当点击其下方或上方的其他 div 时消失。

Answer 1

当然，您必须根据需要调整样式和 html:

$('li').on("click", function(e) {
	e.stopPropagation();
	let $el = $(this);
  if(!$el.children('ul').hasClass('active')) {
  	$('#tree').find('ul').removeClass('active');
  	$el.parentsUntil('#tree').addClass('active');
  }
  $el.children('ul').toggleClass('active');
});

ul {
  list-style-type: none;
  display:none;
}

#tree {
  display:block;
}

li {
  cursor: pointer;
  background: #F1F1F1;
  padding: 5px;
  border: 1px solid #CECECE;
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tree">
  <li>EU
    <ul>
      <li>FR
        <ul>
          <li>Division 1</li>
          <li>Division 2</li>
        </ul>
      </li>
      <li>NL
        <ul>
          <li>Division 1</li>
          <li>Division 2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>US
    <ul>
        <li>TX
          <ul>
            <li>Division 1</li>
            <li>Division 2</li>
          </ul>
        </li>
        <li>NY
          <ul>
            <li>Division 1</li>
            <li>Division 2</li>
          </ul>
        </li>
      </ul>
  </li>
</ul>