如何使用 Bootstrap 4 和 Angular 7 在导航栏中制作多级下拉菜单

Question

我想使用 bootstrap 4 和 angular 7 创建多级 dropdwon。

我可以使用 bootstrap 的官方文档在导航栏中创建简单的下拉菜单。

但是当我尝试创建多级下拉菜单时，它不起作用。

Bootstrap 4: Multilevel Dropdown Inside Navigation

使用上面的链接，我可以找到制作多级下拉菜单的解决方案。

但它使用某种 jQuery 代码来正常工作。

有没有使用引导程序制作多级下拉菜单的内置方法？

我在 bootstrap 的官方文档中没有看到任何与此相关的内容。

我不知道我的代码中是否遗漏了任何脚本或 css。

"styles": [
                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
                            "src/styles.css"

                        ],
                        "scripts": [
                            "node_modules/jquery/dist/jquery.min.js",
                            "node_modules/bootstrap/dist/js/bootstrap.min.js",
                            "node_modules/popper.js/dist/popper.min.js"
                        ],

这是我用于引导 css 和 js 的 angular.json 部分。

任何一种解决方案都将不胜感激。

我需要这样的结果

Answer 1

试试这个：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="container">
    <div class="row">
        <h2>Multi level dropdown menu in Bootstrap 3</h2>
        <hr>
        <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
                Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
              <li><a href="#">Some action</a></li>
              <li><a href="#">Some other action</a></li>
              <li class="divider"></li>
              <li class="dropdown-submenu">
                <a tabindex="-1" href="#">Hover me for more options</a>
                <ul class="dropdown-menu">
                  <li><a tabindex="-1" href="#">Second level</a></li>
                  <li class="dropdown-submenu">
                    <a href="#">Even More..</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">3rd level</a></li>
                        <li><a href="#">3rd level</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Second level</a></li>
                  <li><a href="#">Second level</a></li>
                </ul>
              </li>
            </ul>
        </div>
    </div>
</div>

参见参考：https://bootsnipp.com/snippets/kM4Q