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

Question

我正在构建一个网站，其中不同的层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");  }});

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>