单击新项目时，启动分层导航，Bootstrap 4

Question

我有分层导航

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

如果点击另一个时怎么能让它关闭？

以下是我的菜单部分：

＆＃13;

＆＃13;

<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='#exampleAccordion'>
		<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用可折叠元素的data-parent属性（请参阅https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example）和正确的ID选择器。

应该是这样的（使用#offcanvasNav作为父级）：

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

如果您想使用javascript，您还可以使用https://getbootstrap.com/docs/4.1/components/collapse/#methods中的方法关闭所有其他可折叠内容。