当我从列表 #2 或列表 #3 中选择时，如何折叠<li>列表 #1？

Question

我正在尝试崩溃＆lt;ul class =" list1">当我选择A＆lt时;li>从列表2(＆lt; ul class =" list2">(或从列表3(＆lt; ul class =" list3">(

当前，如果我打开列表，它保持打开状态，并且不会关闭已经打开的其他列表。

html：

<ul class="components">
<!-- LIST 1 -->
  <li>
    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
      Home
    </a>
    <ul class="collapse list-unstyled" id="list1">
      <li>
        <a href="#">Inicio 1</a>
       </li>
       <li>
         <a href="#">Inicio 2</a>
        </li>
        <li>
          <a href="#">Inicio 3</a>
        </li>
     </ul>
   </li>
<!-- LIST 2 -->
   <li>
    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
      Second home
    </a>
    <ul class="collapse list-unstyled" id="list2">
      <li>
        <a href="#">Inicio 1</a>
       </li>
       <li>
         <a href="#">Inicio 2</a>
        </li>
        <li>
          <a href="#">Inicio 3</a>
        </li>
     </ul>
   </li>
<!-- LIST 3 -->
   < li >
    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
      Another Home
    </a>
    <ul class="collapse list-unstyled" id="list3">
      <li>
        <a href="#">Inicio 1</a>
       </li>
       <li>
         <a href="#">Inicio 2</a>
        </li>
        <li>
          <a href="#">Inicio 3</a>
        </li>
     </ul>
   </li>
</ul>

javaScript：

$(function() {
 $('.components li a').click(function(e) {
   e.preventDefault();
   var $this = $(this);
   $this.closest('ul').children('li').removeClass('active');
   $this.parent().addClass('active');
 });
});

结果是所有项目＆lt;li>选定的剩余，没有列表倒塌。

Answer 1

$(function() {
  $('.components li a').click(function(e) {
    e.preventDefault();
    var $this = $(this);
    var mainList = $this.closest('ul');
    var subLists = mainList.children('li').children('ul');
    mainList.children('li').removeClass('active');
    subLists.addClass('collapse');
    $this.parent().addClass('active');
    var selectedSublist = $this.closest('li').children('ul')
    if (selectedSublist.hasClass('collapse'))
      selectedSublist.removeClass('collapse');
    else
      selectedSublist.addClass('collapse');
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="components">
  <!-- LIST 1 -->
  <li>
    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
      Home
    </a>
    <ul class="collapse list-unstyled" id="list1">
      <li>
        <a href="#">Inicio 1</a>
      </li>
      <li>
        <a href="#">Inicio 2</a>
      </li>
      <li>
        <a href="#">Inicio 3</a>
      </li>
    </ul>
  </li>
  <!-- LIST 2 -->
  <li>
    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
      Second home
    </a>
    <ul class="collapse list-unstyled" id="list2">
      <li>
        <a href="#">Inicio 1</a>
      </li>
      <li>
        <a href="#">Inicio 2</a>
      </li>
      <li>
        <a href="#">Inicio 3</a>
      </li>
    </ul>
  </li>
  <!-- LIST 3 -->
  <li>
    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
      Another Home
    </a>
    <ul class="collapse list-unstyled" id="list3">
      <li>
        <a href="#">Inicio 1</a>
      </li>
      <li>
        <a href="#">Inicio 2</a>
      </li>
      <li>
        <a href="#">Inicio 3</a>
      </li>
    </ul>
  </li>
</ul>