Javascript 折叠列表菜单更改

我有一个带引导的Rails应用程序，我使用以下代码在列表折叠菜单中显示类别、子类别等。如您所见，我将以三人一组的方式浏览所有内容，以便在三个不同的

列中显示它们

一切都显示得很好，但我想对行为进行一些修改，我不知道如何实现它们

当我点击一个类别时，列表会折叠，但其他三列也会随之折叠。如何将其更改为仅折叠我单击的列

当我点击一个类别时，之前打开的类别不会像预期的那样关闭。单击新类别时，如何关闭以前打开的类别

这是折叠列表菜单的外观，以及我要讨论的两个问题：

Javascript:

$('.cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-title, .cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-icon').click(function() {
        let parent = $(this).parent().parent();
        parent.siblings().removeClass("cl-item-open");
        parent.toggleClass('cl-item-open');
    }
);


$('.cl-item').each(function(){
    console.log ($(this).find('> ul').length);
    if ( $(this).find('> ul').length === 0 ) {
        $(this).addClass('cl-item-no-sub');
    }
})

$li-padding: 7px;
$li-padding-tools: 10px;
$cascade-padding: 25px;
$bg-level-1: #fafafa;
$bg-level-2: #ffffff;
$bg-level-3: #ffffff;
$color-tools: #9e9e9e;
$blue-color: #586181;
$arrow-color: #dadada;
$toggle-width: 1.5em;

.cl-start-wrap {
  list-style: none;
  padding: 0;
  margin: 0px;
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  > li {
    > .cl-label-wrap {
      padding: $li-padding 0 $li-padding $cascade-padding*0;
      margin: 10px 0;
      background: $bg-level-1;
      &:hover {
        background: darken($bg-level-1, 5%);
      }
    }
   > ul > li {
      > .cl-label-wrap {
        padding: $li-padding 0 $li-padding $cascade-padding*1;
        background: $bg-level-2;
        &:hover {
          background: darken($bg-level-2, 5%);
        }
      }
      > ul > li {
        > .cl-label-wrap {
          padding: $li-padding 0 $li-padding $cascade-padding*2;
          background: $bg-level-3;
          &:hover {
            background: darken($bg-level-3, 5%);
          }
        }
      }
    }
  }
}

.cl-item {
  > ul {

  }
  > .cl-label-wrap {
    .cl-label-title {
      cursor: pointer;
      color: $blue-color;
      font-weight: bolder;
    }
    .cl-label-icon {
      cursor: pointer;
      text-align: center;
      &:before {
        cursor: pointer;
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
      }
    }
    .cl-label-tools {
      a {
        color: $color-tools;
        &:hover {
          color: darken($color-tools, 10%);
        }
      }
    }
  }
}
.cl-item:not(.cl-item-open) {
  > ul {
    display: none;
  }
  > .cl-label-wrap {
    .cl-label-icon {
      &:before {
        font-family: "Font Awesome 5 Free";
        color: $arrow-color;
        position: relative;
        content: "\f0da";
        font-weight: 900;
        font-size: 12px;
      }
    }
  }
}
.cl-item.cl-item-open {
  > .cl-label-wrap {
    .cl-label-icon {
      &:before {
        font-family: "Font Awesome 5 Free";
        color: $arrow-color;
        position: relative;
        content: "\f0d7";
        font-weight: 900;
        font-size: 12px;
      }
    }
  }
}
.cl-item.cl-item-no-sub {
  > .cl-label-wrap {
    .cl-label-title {
      cursor: default;
    }
    .cl-label-icon {
      &:before {
        content: "";
      }
    }
  }
}

// Label-Flexbox
.cl-label-wrap {
  display: table-cell;
  -ms-display: flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
  .cl-label-title {
    order: 1;
    flex: 1 1 auto;
    align-self: auto;
  }
  .cl-label-icon {
    order: 0;
    flex: 0 1 $toggle-width;
    align-self: auto;
  }
  .cl-label-tools {
    order: 2;
    flex: 0 1 auto;
    align-self: auto;
    white-space: nowrap;
    padding: 0 $li-padding-tools;
  }
}

$('.cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-title, .cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-icon').click(function() {
        let parent = $(this).parent().parent();
        parent.siblings().removeClass("cl-item-open");
        parent.toggleClass('cl-item-open');
    }
);


$('.cl-item').each(function(){
    console.log ($(this).find('> ul').length);
    if ( $(this).find('> ul').length === 0 ) {
        $(this).addClass('cl-item-no-sub');
    }
})