求推荐支持移动端Bootstrap嵌套折叠子菜单导航的插件

解决方案 #

你不需要额外引入非Bootstrap生态的第三方插件，以下两种方案都可以实现需求，完全适配你现有的jQuery + Bootstrap技术栈：

方案1：用Bootstrap原生Collapse组件实现（无额外依赖）

这是改造成本最低的方案，Bootstrap自带的折叠组件本身就支持无限层级的嵌套菜单展示，只需要调整你现有模态框内的菜单结构，给需要嵌套子菜单的父项添加对应属性即可，示例代码如下：

<li class="nav-item">
  <a class="nav-link active" data-toggle="collapse" href="#homeSubmenu" role="button" aria-expanded="false" aria-controls="homeSubmenu">
    Home & Garden <span class="float-right">›</span>
  </a>
  <!-- 嵌套子菜单 -->
  <div class="collapse pl-3" id="homeSubmenu">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link" href="#">家具</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="collapse" href="#gardenSubmenu" role="button" aria-expanded="false" aria-controls="gardenSubmenu">
          园艺用品 <span class="float-right">›</span>
        </a>
        <!-- 二级嵌套子菜单 -->
        <div class="collapse pl-3" id="gardenSubmenu">
          <ul class="nav flex-column">
            <li class="nav-item"><a class="nav-link" href="#">花盆</a></li>
            <li class="nav-item"><a class="nav-link" href="#">肥料</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</li>

这个方案不需要新增任何外部资源，点击父菜单即可展开/收起子菜单，自带平滑过渡动画，和你现有模态框的逻辑完全兼容，不会产生冲突。

方案2：用Bootstrap生态的多级滑入菜单组件实现（类参考Demo效果）

如果你需要点击父菜单后整页滑入子菜单、带返回上级的交互效果，和你参考的两款Demo效果一致，可以使用Bootstrap官方生态适配的移动端嵌套导航组件，只需要引入对应的CSS和JS文件，给现有菜单添加对应data属性即可快速实现，支持自定义返回按钮文案、动画速度、层级逻辑，适配移动端触摸交互，不会和你现有代码产生冲突。

注意事项 #

• 两种方案都支持无限层级的菜单嵌套，可根据业务需求灵活调整
• 若使用原生方案，只需要确保你当前引入的Bootstrap版本包含Collapse组件即可，常规Bootstrap完整版默认都包含
• 所有菜单的展开状态、交互逻辑都可以通过data属性配置，不需要额外编写自定义JS代码

内容的提问来源于stack exchange，提问作者Gandalf