html 中Bootstrap实现可折叠3级菜单分组侧边导航菜单

好的，实现一个三级可折叠菜单的方法跟实现两级菜单的方法类似，只需要再嵌套一层即可。下面是实现三级可折叠菜单的代码：

<div class="sidebar">
  <ul class="nav">
    <li>
      <a href="#">一级菜单1</a>
    </li>
    <li>
      <a href="#">一级菜单2</a>
    </li>
    <li>
      <a href="#submenu1" data-toggle="collapse">一级菜单3</a>
      <ul id="submenu1" class="collapse">
        <li>
          <a href="#">二级菜单1</a>
        </li>
        <li>
          <a href="#subsubmenu1" data-toggle="collapse">二级菜单2</a>
          <ul id="subsubmenu1" class="collapse">
            <li><a href="#">三级菜单1</a></li>
            <li><a href="#">三级菜单2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

上面的代码中，我们新增了一个二级菜单项，它包含一个子菜单，这个子菜单又包含两个三级菜单项。注意，三级菜单项不需要再设置 collapse 类。

然后，需要在 JavaScript 中初始化 Collapse 组件。代码如下：

<script>
  $(document).ready(function() {
    $('.collapse').collapse();
  });
</script>

现在，我们就成功实现了一个三级可折叠菜单的侧边导航菜单。用户点击菜单项3时，它的子菜单展开，再点击二级菜单项2时，它的子菜单也展开。再次点击二级菜单项2时，它的子菜单折叠起来。

希望这个回答能够帮到你。如果还有其他问题，请随时提出。