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

debugcn 发表于 Dev

尤里特·范德普洛格

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

组
- 多个选项（按钮；选择子组之一）
子组
- 多个选项（按钮；选择子分组之一）
SUBSUBGROUPS等

目前，我正在使用JQuery来激活不同的控件divs，但是我想在divs它们之间单击以停用它们，或者单击另一个div/，button从而在当前的active上无效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按钮时，它们之间会消失。

拉普斯卡斯

您当然必须根据需要调整样式和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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。