Javascript 单击新项目时的Colapse分层导航，引导4

我有一个分层导航

问题是，当我点击两个有子项的项时，它们都保持打开状态，使菜单有一个我不想要的滚动条（我知道我可以隐藏滚动条，但我不想这样做）

当单击另一个时，如何使其关闭1

这是我菜单的一部分：

在可折叠元素（请参阅）上使用带有适当id选择器的

数据父项属性

应如下所示（使用
#offcanvasNav
作为父项）：












[...]


如果要使用javascript，还可以使用中的方法关闭所有其他可折叠文件

我相信我已经在使用数据家长了，比如说Accordian。这是所有菜单项中的父项id和数据父项。我打算试试javascript，但我真的不熟悉它。@CarlPiper那么它应该已经可以工作了。身份证上的某个地方可能有错？没有，没有错，我会调查的。至少现在我知道它应该工作了。我对原始问题进行了编辑，并在inspect元素中显示了代码，就像我们用php完成菜单一样，我不能轻松复制并粘贴到这里。但是如果你能看一看，如果你能发现这个问题，我将不胜感激
<ul id="offcanvasNav">
  <li class='nav-item' data-toggle='tooltip' data-placement='right' title='Stock Management'>
    <a class='nav-link nav-link-collapse collapsed' data-toggle='collapse' href='#collapseMulti33' data-parent='#offcanvasNav'>
      <i class='fas fa-fw fa-lock'></i>
      <span class='nav-link-text'>Admin</span>
    </a>
    <ul class='sidenav-second-level collapse' id='collapseMulti33'>
      <li>
        <a href='/admin/settings.php'>Settings</a>
      </li>
      <li>
        <a href='/admin/logs.php'>Logs</a>
      </li>
      <li>
        <a href='/monitor/index.php?disp=bootstrap'>System Information</a>
      </li>
    </ul>
  </li>
  [...]
</ul>