Как вы можете переключать другие div'ы отдельно друг от друга, находясь в активном div (с JQuery)?

Question

Я создаю веб-сайт, на котором разные слои divs показывают разные разделы. В основном это выглядит так:

1. GROUP
   • Несколько опций (кнопки; выберите одну из подгрупп)
2. SUBGROUP
   • Несколько вариантов (кнопки; выберите одну из подгрупп)
3. ПОДПИСИ и т. Д.

В настоящее время я использую JQuery для активации различных divs, но я хочу переключаться между divs, нажимая за пределами них для деактивации или нажимая на другой div / button, чтобы он отменял текущий активный div.

Есть ли(простое) решение в JQuery и / или CSS для достижения этой цели? Я пробовал несколько вещей, но каждый раз неправильно divs деактивировать или всплывающее окно. Я думаю, что здесь отсутствует математическое решение ..

Я пытался использовать removeClass и addClass, toggleClass или toggle в сочетании с классом .active, который показывает divиспользуя display:none и display:block. Они работают при использовании нескольких divs или только двух слоев, но при наличии нескольких слоев и комбинаций мне не удается найти правильное решение.

// 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 выше. Но между divs исчезают при нажатии на другие divs под или над ним.

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>