Javascript 当我从列表2或列表3中选择时，如何折叠列表1？

当我从列表2

或列表3
中选择一个
• 时，我试图折叠

  当前，如果我打开一个列表，它将保持打开状态，并且不会关闭其他已打开的列表
  HTML:
  结果是所有选中的项目都保留下来，没有列表崩溃。
  $function{ $'.组件LIA'.单击函数E{ e、 防止违约； var$this=$this； var mainList=$this.closest'ul'； var sublist=mainList.children'li'。children'ul'； mainList.children'li'。删除类'active'； 子列表。addClass“崩溃”； $this.parent.addClass'active'； var selectedSublist=$this.closest'li'。children'ul' 如果选择了SubList.hasClass'collapse' selectedSublist.removeClass'collapse'； 其他的 selectedSublist.addClass'collapse'； }; }; 谢谢你的回答。将正确关闭，但不会制作任何动画。以前它做引导的折叠动画，现在它只是在更改指向的库时突然关闭。你知道我怎样才能解决这个问题吗？

  <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>
  

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